Flutter

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. ...

Changelog: Code updated to Flutter 3.10. Every Flutter application comes in debug mode by default, which means that the debug banner is shown. It serves only to remind us that the application is in debug mode, and when you switch to release mode, this banner will not be present. But this banner can be annoying to some people, like me, during the development of the app. To remove it, simply set the value of the debugShowCheckedModeBanner property to false in your MaterialApp: ...