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

Introduction One year ago I avoided code generation as best as I could. I always thought that it is way better to write the code yourself so that you know what happens. With generators, there is usually a different syntax with annotations and eventually some code pops out that doesn’t really look like what you have declared. But my view has changed. Now, I am always in favor of generators. And for all those struggling with it, I created this article. Learn how to create notifiers with the Riverpod generator in Flutter in the most simple way! ...

Introduction Let’s say you have a notification icon and want to display the number of new messages. Or you have a shop with limited items that you want to advertise. Or you have a list and want to put the index number to every item. All those use cases can be accomplished with the Badge widget. All those simple solutions can be implemented within minutes. Here is how to use the Flutter Badge widget. ...

Introduction For your Instagram clone or your member app: Here is how to make rounded profile pictures in Flutter. An easy and fast solution for all app types! In this article, I am going to show you how to make rounded profile pictures in Flutter apps. Why? Because it’s state of the art on many well-known websites. Even Medium uses them, just take a look here: ...

Introduction Get rid of annoying bugs and learn how to prevent a double click on buttons in Flutter apps with this easy approach. Your users will also thank you for this! We always assume the best. All people are treated equally, nobody wants war, and users only click once on a button and wait patiently until something happens. Sadly, I can’t fix everything but for the last point, I have a tip for you. Here is how to prevent a double click on buttons in Flutter apps. ...

Introduction Learn why your apps crash and why you get complaints from users. Here is how to monitor your mobile apps with Firebase Crashlytics. Firebase Crashlytics is a light-weight solution to get insight about why your users get app crashes and exception messages. It is part of the Firebase cloud services, but can be used for free and supports mobile apps. A dashboard shows you in detail your app metrics and allows inspecting reported crashes in detail. You get information about the exception, the exact line of code, and also the current stack trace at that time. ...

Introduction Here is how to set up a free repository for your Flutter packages with Cloudsmith in no time! A package repository has many benefits over packages in local folders or GitHub repositories. If you want to publish your package publicly, you usually are fine with pub.dev. In case you need a private solution, continue reading here. I’ll show you how to set up a free repository for your Flutter packages with Cloudsmith. ...

Introduction Built-In vs external package: Here are two essential methods of how you can find out if two Flutter objects are equal or not. Equality comparison is essential in any kind of app. Duplicate objects are often undesired. In this article I’ll demonstrate how you can find out if two Flutter objects are equal or not. You might probably know the drill from other programming languages and Dart makes no exception here. The article will show you two ways of comparison. A longer one with built-in methods provided by Dart and another one that relies on an external package but is less verbose. ...

Introduction Let’s welcome Bitwarden, KeePass, LastPass, and others. Here is how to add password manager support to your Flutter apps. In addition, you can use other autofill options for credit cards, birthdays, address data, and more in the same way! Password managers save us time and help choosing stronger and more diverse passwords in general. Instead of remembering hundreds of credentials for all your sites, a master password is enough. In this article I will show you how to add password manager support to your Flutter apps. In addition, you also can configure this to support autofills for emails, username, birthdays, address data, or credit card information! ...

Introduction Here is a deep dive into GPS, permissions, and manifests. Learn how to track your location in a Flutter app. Find out how to collect location data while your app is in the background. There are also tips included to prevent the OS from terminating your app after some time. Working with location data in mobile-aware apps is a common use case in the current app ecosystem. In this deep dive I will show you everything you need to know about how to track your location in a Flutter app. No matter if you want a to put a pin on a map with the current location or track a device continuously for hours, everything is possible. ...

Introduction Here is my practical guide about Riverpod. Learn how to use Riverpod in Flutter apps with simple code examples. Explore AsyncNotifierProvider, NotifierProvider, and FutureProvider in real-world scenarios. Riverpod is probably one of the top 2 state management solutions in Flutter apps together with BLoC according to my observations. In this guide, I want to show you some real-world use cases and how you can implement them with Riverpod. I assume you already used Riverpod before and gained some first-hand experience. So, let’s get started on how to use Riverpod in Flutter apps. ...

Introduction Here is how to manage a Flutter monorepo with multiple packages and melos instead of using shell scripts. Repository administration is really easy with this field-tested tool! I have some private Flutter packages in single repositories on GitHub. And because they are private, I had some authentication issues with transitive dependencies. But then someone guided me into another direction → monorepo. Here is a quick start guide of how to manage a Flutter monorepo with multiple packages and melos. ...

Introduction Backups are underrated … until you really need them. So here is how to backup your Cloud Firestore database. Forget about external tools or self-written Cloud Functions and use the provided tools instead! I store quite a lot of stuff in Firestore, mostly for personal use. In the last months, I often thought about backups. But I have to admit … I am lazy when it comes to boring stuff. However, some of the data is really valuable and will be lost in case of a disaster. So I finally stopped doing cooler things and investigate backup solutions. Here is my approach on how to backup your Cloud Firestore database. ...

Introduction Default, named, constant, factory?!? Here is a quick introduction to different Dart constructors. Knowing the differences can make your code way more readable! Everybody needs to use constructors. And everybody needs to know what’s possible with them. So here is a quick introduction to different Dart constructors. Default Constructor The default constructor is the constructor type you probably use the most. It creates an instance of an object and is essential in any object-oriented programming language. Here is a small code example: ...

Introduction In this article, I guide you through the setup steps for Cloud Firestore and show you how to use Firebase Cloud Firestore with a Flutter app. We take a look at CRUD operations, security rules, and some pitfalls to avoid. Firebase Cloud Firestore is a scalable NoSQL cloud database where you can store relevant data for your apps. It is very flexible and can be secured with access rules. You will learn ow to use Firebase Cloud Firestore with a Flutter app. In the following sections, we’ll talk about ...

Introduction This short article shows how to perform HTTP requests from a Flutter application. We have a look at the most common request types GET, POST, PUT, and DELETE. Performing HTTP requests is a must-have for every app nowadays. In this article, I am going to show you how to add this capability to your Flutter app. We will have a look at two packages to accomplish this task: The http package and the dio package. They are very similar and you can use whatever you like more. In the end, we focus on parsing JSON results from requests, so that the data can be used within our app. ...