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
Written by
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?
Written by
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
Written by
In Flutter, you can create a color from a hexadecimal color string value using the Color class. The Color class takes a 32-bit integer value as an argument, where the first 8 bits represent the alpha channel (transparency) and the remaining 24 bits represent the red, green, and blue channels. To create a color object…
-
Flutter: How to remove the debug banner during development
Written by
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
Written by
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
Written by
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 You can use the sort method of List…
-
Flutter: slowing down animation for debugging
Written by
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
Written by
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
Written by
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
Written by
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 is described at docs.flutter.dev. To release the iOS app, you use Flutter to build a…
-
Flutter: rounded corners for images
Written by
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)
Written by
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
Written by
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
Written by
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 or even the complete screen, height can be set to double.infinity.
-
Flutter on iOS: themeMode does not change to dark mode if `ThemeMode.system` is used
Written by
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
Written by
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
Written by
The full documentation for this is available on flutter.dev When creating json_serializable classes the first time, you’ll get errors similar to what is shown in the image below. These errors are entirely normal and are simply because the generated code for the model class does not exist yet. To resolve this, run the code generator that generates…