Posts

Introduction In this article, we are going to implement navigation logic and learn how to navigate between pages in your Flutter application. Create multi-page apps without any effort! If you don’t want to develop a single-page application, you will need a navigation pattern to get from one page to another. In a Flutter application, there are 3 different ways to handle this problem. I’ll show them to you in the following sections. Let’s see how to navigate between pages in your Flutter application! ...

Introduction Learn how to prevent RichText styling issues in Flutter apps and consider using the alternative Text.rich. This small tip will save you time! Flutter provides developers with a versatile set of widgets for creating rich and engaging user interfaces. Two commonly used widgets for displaying styled text are RichText and Text.rich. While both widgets offer text styling capabilities, it’s essential to understand their differences, especially the fact that RichText does not use the default text theme. Learn how to prevent RichText styling issues in Flutter to not get headaches like did. ...

Introduction Here is how to use Firebase Authentication in your Flutter app to authenicate your users without any effort. Don’t bother building your own authentication service and use this proven service instead! What is Firebase Authentication? Firebase Authentication is a simple way to verify a user without having to worry about storing credentials. It supports a variety of login mechanisms and is easy to set up. You receive a complete registration flow for your users including mail confirmation and validation if desired. Before implementing an authentication process by yourself, consider using this option. ...

Introduction Learn how to create a nice mouse hover effect in a Flutter app to make it more appealing on the desktop and web platform. Since Flutter is gaining more and more traction in the desktop and web world, I wanted to share this guide about mouse hover effects and animations. You will learn how to create a nice mouse hover effect in a Flutter app that will make a widget bigger on hover and return to its original size on exit. ...

Introduction We cover a basic example of how to write unit tests for a Flutter application. Explained code samples are included. Here is how to write unit tests for a Flutter application! Testing is an essential task in every software project (or at least it should be one). This time we are focussing on how to write unit tests for a Flutter application. I assume you are familiar with the concept of unit testing, the why and the what for. So we will focus on writing the test cases and how to structure them. This is mainly for people who didn’t write many or any tests for a Flutter application at all. It will give you a compact overview to start with. A link to the used sources is provided at the end. ...

Introduction A ready-to-use and working build pipeline for Azure DevOps to build Flutter apps for iOS, Android, and Windows. All packages are store-ready! Here is a working pipeline for Azure DevOps to build Flutter apps with the most recent SDK version for iOS, Android, and Windows alongside an integration and configuration guide. It will produce an Android App bundle (.aab), an iOS IPA file, and a Windows MSIX package which can be submitted to the corresponding app stores. ...

Introduction A productive app should not have it. So here is how you can remove the Flutter debug banner in your applications. The debug banner should indicate that an app is currently under development. By default, it is displayed when you launch your Flutter app. A lot of beginners struggle with it and need help. However, the change is quite simple. So here is how to remove the debug banner in a Flutter application. ...

Introduction In this article, I’ll show you how to store Flutter app data on your device with the plugin shared_preferences. It’s the default solution when you want to store some data! Shared Preferences is a useful tool for persisting small amounts of data, such as user settings. It’s a key-value store similar to a Dictionary in Dart. The API is easy to learn, with getter and setter methods for various types like Int, Double, Bool, String, and StringList. Let’s learn how to store Flutter app data on your device with it! ...

Introduction Firebase is the perfect choice to add cloud capabilities to your apps. Here is how to create a Firebase project and link it with your Flutter app. Start your Firebase journey with this guide! Firebase is a lightweight app development platform of Google offering various services like databases, authentication, messaging, and many more. It offers SDKs for different programming languages and is well-documented. In this article, you’ll learn how to create a Firebase project and link it with your Flutter app. ...

Introduction This short article shows how to install packages in your Flutter app so that you can use existing code and you don’t have to write everything yourself. With packages, the development of apps can be accelerated and simplified by a lot. We have a look at how to find packages, how to add them to our app, and how we can use them in the code. For demonstration purposes, I am going to use the package url_launcher in this example. Here is how to install packages in your Flutter app. ...

Introduction People like charts. They are an easy way to display data. So here is how to create beautiful line charts in a Flutter app. This is perfect for any dashboard you want to build! With line charts, you can visualize a variety of data. Think about daily sales of the last 30 days or accumulated revenues of the current year. It’s a perfect way to show users values that change over time. In this article, I want to show you how to create beautiful line charts in a Flutter app. ...

Introduction Microsoft is a big player in the enterprise environment. So here is how to log in from a Flutter Web App with a Microsoft organization account. Once the setup is complete, it works flawlessly! You have a Flutter Web App (no Android or iOS) and need to add the possibility that users can log in with their Microsoft organization accounts. It sounds like a rather simple task but it took me quite a while to solve it. To save you the trouble, here is how to log in from a Flutter Web App with a Microsoft account. ...

Introduction Firebase Hosting offers a neat feature to automatically deploy a web app to a preview channel when a new pull request is created on GitHub. With that feature, testers can verify changes and give constructive feedback while the productive web app is not affected. But without proper configuration, the GitHub Action can run into errors. So here is how to fix Firebase Hosting errors when using automatic deployment with GitHub. ...

Introduction Learn how to create beautiful charts and graphs in your Flutter application to create dashboards or visualize statistic evaluations. With this article you can get started quickly! In this article, I’ll show you how to create beautiful charts and graphs in your Flutter application. I’ll cover the tools and methods to create good-looking and interactive charts. Whether you’re making a finance app, a data dashboard, or just want to make your app look better, learning how to make charts in Flutter can be a big help. ...

Introduction Here is how to use the Scaffold widget in a Flutter application to create a consistent app skeleton in no time. It’s the most common basic building block in Flutter apps and here is how it works! In Flutter, a Scaffold is a fundamental building block used to create the basic structure and layout for an app’s user interface. It provides a pre-designed app bar, a body area, and other essential components, making it easier for developers to create consistent and standard app layouts. Think of it as a template for your app’s screen with that you can start development faster. ...

Introduction Here is how to implement drag and drop in a Flutter application and build awesome user interfaces for all input types. Give your users some gestures to play around! Drag and drop is a common UX pattern on mobile, tablets, and desktops. It’s easy and convenient, regardless of the input type (finger, stylus, mouse) you use. Here’s how to implement drag and drop in a Flutter application. Draggable We start with the Draggable widget. This is the widget the users can drag in your Flutter app. You need to provide a child and a feedback widget. ...

Introduction I never really had trouble with lists in dart. But only until I used null values. Don’t fall for this trap like I did! I came across a strange error during development of a game app recently. The game required a 2-dimensional array or list to represent a table structure. To do this, I chose the data type List<List<MyObject>>. At the beginning, I initialized the structure with null values. Here is the code ...

Introduction Challenging your users with questions is common. So here is how to make a simple quiz page widget for Flutter apps. There are tons of quiz apps out there in the app stores. If you ever thought about making your own, then here is a tutorial on how to make a simple quiz page widget for Flutter apps. Eventually, it will look like this: ...

Introduction Firebase offers several services for storing data, including Firestore, Storage, and Realtime Database. However, it can be difficult to keep track of which data belongs together across service borders. Use my approach on how to connect data between different Firebase services. It has worked great for me in the past! Unique indentifiers (UID) When using Firebase Authentication, you get a UID per user. We can use this UID to identify corresponding data sets that belong to this user across services. ...

Introduction We’ve all been there, cursing because of CORS. You make an HTTP request only to be greeted by a frustrating error message in your browser. With this short article, I want to show you how to fix CORS errors in web applications. What is CORS? Cross-Origin Resource Sharing (CORS) is a mechanism that allows web browsers or other web clients to make cross-origin requests, which are normally prohibited by the Same-Origin Policy (SOP). CORS is a compromise that provides greater flexibility on the Internet while maintaining high security measures. The Same-Origin Policy (SOP) is a security feature implemented by web browsers that restricts web pages from making requests to a different origin than the one that served the web page. In simple terms, SOP prevents malicious web pages from stealing data or executing actions on behalf of a user without their knowledge or consent. ...