Posts

Introduction Many developers want to monetize their apps to cover development costs. One common approach is a subscription-based app model. In this article, I am going to show you how to enable test purchases for your Android apps to easily test your subscriptions and digital products. What you need To get started, you need a working Android app in the internal test track and test users. To allow test purchases for your test users, go to the Play Console -> Settings -> License testing. ...

Introduction A few days ago, I started noticing that Copilot was a co-author in some of my commits to my GitHub project. Since I write commit messages myself, I had no idea what this was about. The hint in GitHub just tells Co-authored-by: Copilot <copilot@github.com> Yes, I am using GitHub Copilot for development. But I haven’t seen any information that it will be mentioned in my commits as co-author. It just appeared one day. ...

Introduction Windows 11 is forcing us to use AI, ads, and many other features most people don’t want. Here is how you disable AI in Windows. In recent years, Microsoft changed Windows from a local operating system to an always-online, cloud-based, agentic one full of AI slop, ads, and unwanted features. Here are some of the feature that nobody asked for and nobody wants: Windows Recall Windows Copilot Start menu searches the web Ads everywhere Excessive telemetry information … I have been using Windows for years and it wasn’t a problem until recently. Due to some app constraints, I cannot switch to Linux and I am also not a big fan of virtual machines or dual boot solutions. ...

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 I have read more and more articles in recent months saying that Firebase is too expensive. While that might be true for some cases, it is not for others. In this article, I want to present 4 Firebase services that are always free. No credit card information, no bank accounts required, no usage limits. All you need is a Firebase account and a Firebase project to get started. Firebase Remote Config 📺 YouTube Tutorial ...

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 I am exploring Firebase Studio to find out if it’s already a serious competitor for Windsurf or Cursor. Firebase Studio is the new kid on the block after Cursor and Windsurf made vibe coding generally available. Instead of writing code directly, users prompt the AI to get a working app for mobiles or the web. In this article, I am exploring Firebase Studio and find out if the tool is already worth a try or not. ...

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