Tag: Flutter
Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
-
FutureBuilder: handle multiple futures in a single widget
By default, FutureBuilder provides a single future parameter that handles a single Future. For multiple Futures, we can combine them into a single Future using Future.wait. Here’s a step-by-step guide on how to do this: Create a list of Future objects Create a list of Future objects that represent the asynchronous operations you want to…
-
Dart: What is the difference between the “const” and “final” keywords?
In Dart, both const and final are used to declare variables that can’t be reassigned after they’re initialized. However, there are some differences between them: In general, use const when you have a value that will never change and you want to ensure that only one instance of it exists, and use final when you…
-
Flutter: How to Create a Color from a Hexadecimal Color String
In Flutter, you can use included the Color class to create a color from a hexadecimal color string value. The Color class accepts a 32 bit integer value with the first 8 bits denoting the alpha channel (transparency) and the subsequent 24 bits representing the red, green and blue channels. To create a color object…
-
Flutter: How to remove the debug banner during development
By default, Flutter shows a debug banner on the top right corner of an app, that indicates that the app was build in debug mode. This banner… … is intended to deter people from complaining that your app is slow when it’s in debug mode. In debug mode, Flutter enables a large number of expensive…
-
Flutter: how to create a better MaterialColor from Color
In Flutter, MaterialColor is a class that defines a color palette to be used within a Material Design app. It creates a set of shades for a given primary color, which can be used in various components of the UI, such as buttons, text fields, and navigation bars. MaterialColor objects can be created from a…
-
Flutter: how to sort a list of objects by one of its properties
In Flutter (Dart), there are different posibilities to sort a list of objects by one of its properties. Let’s asume you have a list of Person objects that have a property name on which you want to sort the array. Sort a list using the sort() method Darts List class already provides an abstract sort…
-
Flutter: slowing down animation for debugging
Slowing down animations in Flutter for debugging purposes can be helpful in observing their behavior more closely. There are a couple of ways to achieve this: Using timeDilation The library that is responsible for different scheduling is flutter/scheduler. This also includes animations. To use the library, simply import package:flutter/scheduler.dart – in this case, timeDilation is…
-
Flutter: red text and yellow lines in Text widget
When using a text widget, there are some configurations where the text turns red and gets yellow lines. In my case, it looks like in the following image. The reason for this is a lack of style parameters from the parent widget. The red text shows that there is no color information available. The yellow…
-
GitLab CI + Flutter: pub: command not found
In one of my projects, I used a GitLab environment to perform Flutter tests. For this, I setup my .gitlab-ci.yaml to use a Flutter docker image of cirrusci/flutter for code quality check or tests. The file looks like this: Up to version 2.10.* of the Flutter docker image, this worked fine. But starting with version…
-
Build and Release a Flutter App
This is a short description of the build and release workflow of a Flutter app. Updating the app’s version number To update the version number, navigate to the pubspec.yaml file and update the following line with the current version string: After the change, run: Build and release the iOS app A detailled description of the whole process…
-
Flutter: rounded corners for images
There are different possibilities to create a rounded corner of images: BoxDecoration To create a rounded corner image in Flutter, you can use the Container widget and set the decoration property to a BoxDecoration with a borderRadius that defines the rounded corners. Here’s an example: In this example, the width and height properties of the…
-
Flutter: enable scroll-to-top for nested Scaffolds (e.g. in IndexedStack)
When using nested Scaffolds (e.g. in combination with IndexedStack), the PrimaryScrollController is not usable by default. An IndexedStack will load all subviews so scroll-to-top will change all scrollable views at the same time, even if they are not visible or it simply does not work, because the PrimaryScrollController can only be attached to a single…
-
Flutter: add drag handle to ReorderableListView
By default, ReorderableListView only shows drag handles on desktop (GitHub). To enable a drag handle inside a ReorderableListView, it is possible to add the following code into the child’s subtree: A full example usage with a very simple list: This will result in the following output:
-
Flutter: expand TextField height to match parent widget
In Flutter, the TextField widget shows a single line by default. To expand the height of TextField to match the parents widgets height, the following code can be used: The important thing is, that both minLines and maxLines need to be set to null. To set the height of the Container to match it’s parent…
-
Flutter on iOS: themeMode does not change to dark mode if `ThemeMode.system` is used
In my case, a simple app should automatically use the theme (light or dark) of the system to style the user interface. By default, this should work when using ThemeMode.system (see flutter documentation). But it didn’t. The themes have been defined as follows: In addition, the WidgetsBindingObserver callback didChangePlatformBrightness() was never called. It was defined…
-
fatal error: ‘Flutter/Flutter.h’ file not found
After switching the flutter channel to beta and back to stable, my app did not compile anymore. The compilation stopped with the following error: Multiple flutter clean and channel switches did not work in this case. The following commands fixed this behavior: See: https://github.com/flutter/flutter/issues/70895#issuecomment-744734693
-
Flutter: generating *.g.dart files for json serialization
When working on mobile apps, you might need to communicate with a web server or easily store structured data. In such cases, JSON is a good solution to handle the data. But this also requires the serialization of data – turning a data structure into a string – or the other way round, deserialization –…