Posts

In the previous post, we took our first major step by writing “Hello World!” directly to the screen of the WT32-SC01 Plus using the LovyanGFX library. This proved that our hardware and basic communication are working. Now, let’s level up and start building real graphical interfaces. In this tutorial, we will introduce two powerful tools that will transform the way we create visual projects: the LVGL library and the SquareLine Studio design tool. Our goal will be to recreate the “Hello World!” message, but this time, the interface will be designed in a visual software and then integrated into our Arduino code. ...

In the first post of this series, we got acquainted with the WT32-SC01 Plus board and its main features. Now, it’s time to get our hands dirty and do what we love most: write code and see something happen on the screen! In this tutorial, we will set up the development environment in the Arduino IDE and create our first program: the classic “Hello World!”. The goal here is to ensure that communication with the display is working perfectly, without the complexity of UI libraries like LVGL. For this, we will use the LovyanGFX library. ...

For those who develop projects with graphical interfaces, the complexity of integrating displays, touch controllers, and microcontrollers can be a major challenge. The WT32-SC01 Plus board emerges as an interesting alternative to simplify this process. This is a development board that integrates the ESP32-S3 processor with a 3.5-inch capacitive touch screen. This “all-in-one” approach is ideal for prototyping and developing user interfaces (UI), such as automation control panels, small interactive consoles, and other devices that require visual interaction with the user. ...

Adding maps to a Flutter application is a powerful feature, but many developers think Google Maps is the only option. Fortunately, there are robust, open-source alternatives like the flutter_map package, which uses OpenStreetMap data and offers incredible flexibility. In this guide, we’ll build a simple application that displays a map with custom and interactive pins (markers). It’s the perfect foundation for any project that needs geolocation, from delivery apps to tourist guides. ...

The power of Flutter lies in its ability to create applications for multiple platforms from a single codebase. When combined with Firebase, this power extends to creating cloud-connected apps quickly and efficiently. In this guide, we’ll demonstrate this versatility by building a user registration app (name and CPF). Although our example focuses on compiling for Windows, the same principles apply to web, mobile, and other desktop platforms with very few changes. ...

Taking a Flutter project to the web is an excellent way to reach a broader audience without needing an app store. When combined with Firebase Hosting, the process becomes not only simple but also incredibly fast and secure, with a generous free tier. In this guide, we’ll walk through the step-by-step process of deploying an existing Flutter project to the web using Firebase Hosting. Prerequisites Before you begin, ensure you have: ...

Developing games or apps that simulate board games always brings interesting UI challenges. Recently, while creating a version of the classic card game Blackjack in Flutter, I found myself needing a playing card component that was not only functional but also visually appealing and, above all, reusable. In this post, I’ll guide you through the process of creating PlayingCard, a widget that renders both the front and back of a card, is fully customizable in size, and was the centerpiece of my Blackjack game. ...

In many applications, we need a visual way to show the progress of a task, whether it’s loading a file, advancing a level in a game, or the steps in a form. I recently came across this need and decided to create my own progress bar widget in Flutter. In this post, I’ll share the process of creating a CustomProgressBar, a reusable, animated, and easy-to-use widget. And best of all, the code is available in a public repository for anyone to use! ...

This tutorial will guide you through the process of adding multi-language support (internationalization and localization) to your Flutter application, using the flutter_localizations and intl packages for Material Design widgets. 1. Introduction Internationalization (i18n) is the process of designing and developing an application so that it can be adapted to different languages and regions without engineering changes. Localization (l10n) is the process of adapting an application for a specific locale or market by adding locale-specific components and translating text. ...

I’m thrilled to share that the blog posts are now available in both Portuguese and English! I recently updated Hugo to incorporate a localization system into my blog. While I’m still working on resolving a few remaining issues (such as limited functionality of files and search, currently only working in the English version of the blog), I’m committed to fixing them as soon as possible. The addition of the localization system is a significant milestone in making my blog content more accessible and comprehensive for both national and international audiences. ...