Here is how you can implement the swipe-to-dismiss pattern in ListViews of a Flutter applications. — Swipe to delete is a common UI pattern in mobile applications. The user swipes an element in a direction and the system reacts with an action. Common use cases include removing entries from lists or making toast notifications disappear, for example. In this short article, I will show you how…

Flutter offers predefined widgets for dialogs, toasts, and overlays. Here is how you use them properly with code examples! — Dialogs are a common pattern in many applications. In this article, I’ll introduce you to the built-in possibilities of Flutter for creating dialogs. We will cover the following widget types: ▶ AlertDialog (and CupertinoAlertDialog) ▶ SimpleDialog ▶ Dialog ▶ Overlay ▶ Toast

A growing app has a lot of resources included that are used in various places. With this approach, you’ll know where to put things and how to reference them. — In this article, we are looking at resource management in Flutter apps. A resource in this context is, for example, a style, an image, a constant, a utility, or a color that will be used within your app. I will show you ways how to organize them inside your app…

A new Flutter project contains a lot of files and folders. In this article, we’ll inspect them and reveal their purposes. — Let’s start with an overview of what a standard Flutter project with version 3.0 will contain. We will have a look at each item in the list and discuss its purpose.

The pubspec.yaml file is the main configuration file for your Flutter app. In this article, we’ll have a look at its contents. — When developing a Flutter app or package, you’ll eventually come across the pubspec.yaml file. I’ll give you an overview of the contents and how to work with the file. It contains package dependency information, SDK version constraints, or project settings like the name. The used syntax is YAML, an easy-to-use…

If you are not feeling well, you go and see a doctor. The same goes for Flutter. — The Flutter diagnostics tool helps you identify configuration problems that might hinder a successful development workflow. As the output can be very helpful, it is required to include a diagnostic summary in every bug report in the official Flutter GitHub repository. Let’s have a look at the tool and its…

The setState function is the most basic approach to managing your state in a Flutter app. Here are some best practices to keep your app maintainable. — The setState function of the StatefulWidget is a simple approach to managing the state within a Flutter app. But there are several pitfalls you need to avoid when you want your app to be working and performant. Here are some best practices you should stick to.

In this article, we are adding a Google Maps widget to our app and use location services to display our current position. — If your app relies on location data and a map, you can integrate a Google map quite easily. I’ll guide you through the setup process and show you how you can customize the map the way you want it to be. Installing the package Run the command flutter pub add google_maps_flutter to install…

In this article, we are having a look at location services and how we can get the current position of the device in our Flutter application. — Location information can be used in various app scenarios. Maybe you want to show points of interest to the users or guide them towards a specific area. Either way, you will need access to the current location of the device. I’ll show you how to accomplish this task.

In this article, we are going to implement navigation logic between pages so that you can guide your users toward the goal. — 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.

5th part of a series on how to build a Flutter app from scratch. This article covers how to style your app and where to get inspiration from. — This is the fifth article of a series documenting the development process of a new Flutter app. In the last episode, we implemented the logic part for the notifications and we enhanced the user interface so that the app became usable. In this article, we are going to revamp the…

4th part of a series on how to build a Flutter app from scratch. This article covers the implementation of the notification logic and the styling of the user interface. — This is the fourth article of a series documenting the development process of a new Flutter app. In the last episode, we linked our simple back-end with the user interface. We also improved the app so that the user can perform actions in the app. …

In this article, we are looking at the Flutter CLI and its most common use cases for building, testing, deploying, and running Flutter applications. — When developing Flutter apps with code editors like Visual Studio Code, Android Studio, or XCode, you don’t need to use the command-line tools of Flutter in general. But all these editors use them internally all the time, probably without you noticing it. …

In this article, I am going to present my top 5 free extensions for Visual Studio Code to you. They offer a jump start for your development progress. — VS Code is a very good code editor, not only in my opinion (see StackOverflow developer survey 2021). But today’s tools can be enhanced with extensions to make them perfect for your specific tasks. Here are the extensions that I use as a Flutter developer.

In this article, I am going to show you how you can build a quick demo application that queries a web service and displays the results. — Developing simple proof of concepts is a required ability in today’s world as a software developer. Flutter is a perfect tool for these kinds of tasks because it allows you to focus on code while keeping the UI simple. Let’s get started right away! Code This is the complete code…

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…

3rd part of a series on how to build a Flutter app from scratch. This article covers details about linking the UI with the underlying data. — This is the third article of a series documenting the development process of a new Flutter app. In the last episode, we focused on defining models that satisfy the app requirements. For storage, we set up a database and added reading/writing capabilities to our app. In this article, we will link…

2nd part of a series on how to build a Flutter app from scratch. This article is about the model definitions and the underlying database for storage. — This is the second article of a series documenting the development process of a new Flutter app. In the last episode, I described the planned features, the environment setup, and the development process in the following. A first app skeleton was implemented in this article, too. In this article, we focus…

1st part of a series on how to build a Flutter app from scratch. This article covers planned app features, environment setup, and the first app skeleton. — This is the first article of a series documenting the development process of a new Flutter app. I’ll describe the planned features, the environment setup, and the development process in the following. The entire code will be published on GitHub and you can contribute your ideas. …

This short article shows how to add packages to a Flutter application 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. …