Detailed Tutorial: Creating an Interactive Calendar Widget in Flutter
In many applications, a calendar is more than just a grid of dates; it’s a scheduling tool, an event planner, or a way to visualize data over time. Although ready-made packages exist, building your own calendar widget in Flutter offers unparalleled control over its appearance, functionality, and business logic. In this tutorial, we will dive deep into the process of creating a monthly calendar widget. We’ll dissect the source code snippet by snippet, explaining the logic behind each part. At the end, we will present the complete, clean files, ready to be copied into your project. ...
Complete Guide to the WT32-SC01 Plus (Part 6 of 6): Navigating Between Screens
We’ve reached the end of our practical journey with the WT32-SC01 Plus! Throughout the last few posts, we’ve learned how to set up the environment, draw on the screen, enable touch, and manipulate widgets. Now, we’ll combine all this knowledge to build the structure of a real application, which almost always involves more than one screen. In this final practical tutorial, we will learn how to create and manage multiple screens in SquareLine Studio and navigate between them using button events. We will create a simple two-screen application, where a button on each screen takes us to the other, demonstrating the basic navigation flow essential for any complex project, such as settings menus, information pages, etc. ...
Complete Guide to the WT32-SC01 Plus (Part 5 of 6): Manipulating Widgets (Interactive Counter)
In the previous post, we brought our interface to life by enabling touch and responding to a button event. Now that we know how to capture user interactions, the next logical step is to make those interactions modify the interface itself. In this tutorial, we will build a slightly more complex and much more practical application: a digital counter. We will create a screen with a number and two buttons, one to increment and one to decrement that number. This example is fundamental because it teaches us how to read from and write to screen widgets, an essential skill for any UI project, whether it’s displaying sensor data, adjusting settings, or any other dynamic application. ...
Complete Guide to the WT32-SC01 Plus (Part 4 of 6): Enabling Touch and Events
In the previous posts, we prepared our environment, got the WT32-SC01 Plus screen working, and even displayed our first graphical interface created with SquareLine Studio. However, our screens were still static. It’s time to bring our project to life by enabling the board’s most important feature: the touch screen. In this tutorial, we will transform our static interface into an interactive application. Our goal is to add a button to the screen and, when it’s pressed, execute an action: printing a message to the Serial Monitor. This is the fundamental step for creating any complex application, from calculators to control panels. ...
Complete Guide to the WT32-SC01 Plus (Part 3 of 6): Your First Interface with SquareLine Studio
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. ...
Complete Guide to the WT32-SC01 Plus (Part 2 of 6): The First Code (Hello World!)
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. ...
Complete Guide to the WT32-SC01 Plus (Part 1 of 6): Introduction and First Steps
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. ...
Creating an Interactive Map with Pins in Flutter using flutter_map
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. ...
Creating an App with Flutter and Firebase
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. ...
Deploying Your Flutter Project to the Web with Firebase Hosting
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: ...