Flutter

Introduction Google Fonts contains over 1,800 different fonts that are free to use. You’ll find the perfect font for any app in their repository. But how do you get them in your app? The usual way is to download the fonts, add them to your pubspec.yaml, and configure them in your app. But there is an easier way. So here is how to use Google Fonts in your Flutter app! Install the package Manually installing fonts is not hard, but it’s a bit annoying. The google_fonts package takes care of most of it. Install the package for your app. ...

Introduction I tried to do something pretty simple in my opinion. Have a widget handle tap, long press, double tap, and right click events. Making it work is rather easy, but it’s way harder to test than I ever imagined. Here is my approach on how to handle tap gestures in widget tests. Testing tap events I started with a ListTile which offers onTap and onLongPress to begin with. Things went smoothly and here is a working widget test: ...

Introduction Flutter web apps become more and more popular and the Flutter team has made significant improvements over the last years to the platform. A good web app needs to be responsive these days. Flutter offers some solutions here (LayoutBuilder, MediaQuery), but testing still feels hard. I came up with some solutions myself which I want to share. So here is how to test your responsive Flutter app. Breakpoints This article focuses on widget testing since this is the layer that handles the responsiveness. The basic idea is to run every test with a different resolution with minimal effort. I use this little helper in various forms: ...

Introduction When consuming large REST APIs, it requires writing a lot of boilerplate code to support all required endpoints. To make your life easier, you can use generators to automatically create type-safe production code for your apps. I’ll show you how to do this in this article. All it takes are 5 minutes of setup and you can enjoy the best way to consume APIs in your apps. Requirements This approach only works if the API source offers an open API specification file to generate the code. It can be either in json or yaml format and is usually available for download in the documentation of the API. ...

Introduction Sick of Material Design? Try out the best Flutter UI library alternatives to make your app stand out from the rest! Material and Cupertino designs have been part of the Flutter ecosystem since the beginning. But sometimes you want your app to look differently without doing all the styling. In this article, I am presenting the best Flutter UI library alternatives found on pub.dev. All presented packages offer a large amount of widgets ready to be used in your apps. The goal is to spend less time with styling and more time with feature development. ...

Introduction Mobile apps already benefit from it. Next in line is Flutter web. So here is how to enable hot reload for Flutter web apps! Debugging web apps has always been a little painful for me. Imagine you have multiple menus and nested screens. Any change resulted in a hot restart and you had to navigate to the previous screen again to see if the changes were applied. But things are about to get better! ...

Introduction Displaying a popup is a rather trivial task for any seasoned Flutter developer. But when you are using Riverpod as state management solution, it can be a bit tricky. Here is my approach on how to show a popup in your Flutter app with Riverpod. Why addPostFrameCallback doesn’t work First, you might come up with this approach: class MyView extends StatefulWidget { const MyView({super.key}); @override State<MyView> createState() => _MyViewState(); } class _MyViewState extends State<MyView> { @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) async { await showDialog( context: context, builder: (context){ return SomeDialogWidget(); }); }); } @override Widget build(BuildContext context) { return Container(); } } Using the addPostFrameCallback function is a good way to perform actions after the first frame is rendered. The widget is build and the dialog appears on top of it. Great in theory, but this doesn’t work with Riverpod notifiers. ...

Introduction Flutter offers several types of tests that you can use to ensure correct app behavior. There are unit tests, integration tests, and finally widget tests. In this article, we’ll have a look at how to do widget testing in Flutter apps. Improve your testing knowledge with this guide. This means that a part of the app is rendered during the tests and you can describe test steps to copy the behavior of a real user. The Flutter SDK offers methods to simulate a complete workflow. ...

Introduction Celebrating user achievements is a great way to boost engagement in your Flutter apps. In this article, we’ll discover how to add simple confetti animations in Flutter apps . But since we are lazy developers, we use a package instead of creating the animation on our own. With the code examples and demo videos, you’ll be ready to blast your users away with confetti! Animation A proper confetti animation can be a challenge. Lucky for us, there is a package on pub.dev that helps us here. ...

Introduction In this article, we explore how to build a modern Flutter app with user authentication powered by Firebase Authentication. You’ll learn how to implement account management methods with Firebase Authentication in the most simple way. Check out the demo application and see how everything comes together. This article covers the following use cases with Flutter code examples for Firebase Authentication: Registration with email and password Users can create an account by providing an email address and a password. ...

Introduction Here is a short guide about how to show test coverage of a Flutter app in Visual Studio Code. With code coverage, you can identify parts of your app that aren’t tested yet. However, it doesn’t tell you if your tests are good or your app is free of bugs! We are going to use Visual Studio Code and two free extensions from the Visual Studio Marketplace: Flutter Coverage ...

Introduction Mobile apps often use bottom navigation. You can reach all entries with one hand and it’s the same for Android and iOS. For Flutter apps, there is the widget BottomNavigationBar to accomplish this. In this article, I’ll share how to use BottomNavigationBar in Flutter apps. We start with this standard implementation: class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( colorScheme: ColorScheme.fromSeed( seedColor: Colors.deepPurple, ), ), home: const MainPage(), ); } } class MainPage extends StatefulWidget { const MainPage({super.key}); @override State<MainPage> createState() => _MainPageState(); } class _MainPageState extends State<MainPage> { final List<String> pages = ["Home", "Search", "Settings"]; String _selectedPage = "Home"; @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( currentIndex: pages.indexOf(_selectedPage), onTap: (index) => setState(() { _selectedPage = pages[index]; }), items: [ BottomNavigationBarItem(icon: Icon(Icons.home), label: pages[0]), BottomNavigationBarItem(icon: Icon(Icons.search), label: pages[1]), BottomNavigationBarItem(icon: Icon(Icons.settings), label: pages[2]), ], ), body: Center(child: Text(_selectedPage)), ); } } There are 3 item that set the page to the corresponding entry when they are clicked. Every item consists of an icon and a label. ...

Introduction In software projects, there is usually a project vision of what the end product should look like. When a developer starts working, there should be some kind of mockup (best case is a Figma file, but I have also seen pencil drawings…). In this article, I want to share my strategies of how to cut a design mockup into Flutter widgets. To illustrate the process, let’s assume we have this template: ...

Introduction I introduced an AbsorbPointer widget which broke my app but the tests to prevent exactly this didn’t fail. Here is why AbsorbPointers are dangerous in Flutter widget tests. Once again, I stumbled across a weird issue with Flutter widget tests. They are not as reliable as you might think. This time I found a problem with a combination of AbsorbPointer and TextField. Here is a pretty simple example: @override Widget build(BuildContext context) { return AbsorbPointer(absorbing: true, child: TextField()); } We have a TextField widget wrapped inside an AbsorbPointer widget. The purpose of the AbsorbPointer is to prevent the TextField from getting focused. The keyboard doesn’t open and you cannot enter text. ...

Introduction Here is how to write a proper Dart data model by hand, with various packages, and with AI assistance to make your life easier. Writing good data models is essential for every developer. In this article I want to show you how to write a proper Dart data model manually, with package support, through AI assistance, or with a web tool. Take this as a starting point to write better models in the future. ...

Introduction Since the release of Dart 3.7, your Flutter web app will give you warnings when you use dart:html in your code and have the latest Dart version activated. It was deprecated by the Flutter team. In this article, I am going to show you how to download files with the web package in Flutter apps. To do that, we will remove dart:html, replace it with the web package, and apply some code changes. ...

Introduction The Firebase Analytics Debug View is a handy tool to check what events your app sends in real time. However, it requires a bit of setup to work from a Flutter web app. Here is how to debug Firebase Analytics events from a Flutter web app. Setup The initial step is to connect your Flutter app with your Firebase project. Follow my guide in case you haven’t done this yet. ...

Introduction Sometimes testing is a joy and sometimes not. Here is a short excursion into the pitfalls of Flutter widget testing. I am currently developing a rather complex Flutter web app. Overall, it’s going great and I like the progress. But I wouldn’t write a short excursion into the pitfalls of Flutter widget testing if everything was perfect. The project is rather complicated and the UI has a lot to offer. So I am investing heavily in testing it properly with widget tests. ...

Introduction This article is about how to organize your widgets in Flutter apps in small, medium, and large apps. Not all of them work in every case and some of them require more attention than others. The results also depends on what you want have. A clear and well-organized structure A simple file structure As few files as possible As few imports as possible You cannot have everything but I can give you strategies to reach all those goals … but not at the same time. ...

Introduction To comply with the General Data Protection Regulation (GDPR) of the EU, the double opt-in process is the best way. It means that users need to confirm a registration with a secondary step. Usually, this is done by clicking a link in an email. In this article, I’ll show you how you can use Firebase to set up such a process. Let’s get started on how to implement double opt-in with Firebase and Flutter. ...