Flutter Tips

Code samples and useful tips for day-to-day Flutter app development.

Download my Flutter Tips app to get all the latest tips on your phone.

Flutter Tips
Color API Deprecations in Flutter 3.27

Color API Deprecations in Flutter 3.27

#dart
#flutter

To support the latest wide gamut color spaces, Flutter 3.27 has deprecated some properties and methods in the Color class.

Text Style with Tabular Figures

Text Style with Tabular Figures

#dart
#flutter
#widgets

If you want to render fixed width (monospaced) digits, set FontFeature.tabularFigures() inside your TextStyle.

Digits Separators in Dart 3.6

Digits Separators in Dart 3.6

#dart
#flutter

Since Dart 3.6 (Flutter 3.27), you can use _ as a digits separator. This works with integers and floats, as well as custom formats (hex, scientific).

New Spacing Argument in Row/Column (Flutter 3.27)

New Spacing Argument in Row/Column (Flutter 3.27)

#dart
#flutter
#widgets
#layouts

Since Flutter 3.27, you can pass a spacing argument to your Row and Column widgets (rather than using SizedBox).

The Banner Widget

The Banner Widget

#dart
#flutter
#widgets

You can use the Banner widget to place a small diagonal banner over a child widget. For more custom styling, build your own using a custom painter.

Improve your code with Cursor Edit Mode

Improve your code with Cursor Edit Mode

#dart
#flutter
#ai

You can use Cursor edit mode to sweep through your code and make changes. Works best with imperative code.

Fixing Version Solving Failed Errors

Fixing Version Solving Failed Errors

#dart
#flutter

A few suggestions for solving the "version solving failed" error when updating your Flutter dependencies.

Adding a Privacy Manifest in Xcode

Adding a Privacy Manifest in Xcode

#dart
#flutter
#production

Starting November 12, 2024, apps that don’t include a Privacy Manifest can’t be submitted for review in App Store Connect.

Fix for Missing Compliance Warning in App Store Connect

Fix for Missing Compliance Warning in App Store Connect

#dart
#flutter
#production

If your app does not use Non-Exempt Encryption, set ITSAppUsesNonExemptEncryption to NO in your Info.plist file in Xcode.

Material Icons Theme (VSCode Extension)

Material Icons Theme (VSCode Extension)

#dart
#flutter
#vscode

Upgrade all your file icons with the Material Icons Theme. File nesting is properly supported, too, and the icons will be correctly left-aligned.

iOS App Store: Build and Upload Script

iOS App Store: Build and Upload Script

#dart
#flutter
#production

A simple script to build and upload your iOS app to App Store Connect. You can run this locally, no CI/CD needed!

API keys storage: Client or Server?

API keys storage: Client or Server?

#dart
#flutter
#security
#production

Some guidelines to help you decide which API keys belong on the client, and which belong to the server.

How to Show the Downloads Count on pub.dev

How to Show the Downloads Count on pub.dev

#dart
#flutter

How to enable dark mode and see downloads count for your favourite packages on pub.dev.

Script to Update the Android Project Settings

Script to Update the Android Project Settings

#dart
#flutter
#production

Use this script to update the Gradle, Java, NDK version and other settings in your Android project.

Error.throwWithStackTrace

Error.throwWithStackTrace

#dart
#flutter
#error-handling

With Error.throwWithStackTrace, you can throw custom exceptions while keeping the original stack trace intact.

Apple Small Business Program

Apple Small Business Program

#dart
#flutter

If your app sales are less than $1M/year, you can apply to the Small Business Program and slash your fees to 15%!

Declaring Riverpod Providers with Ref

Declaring Riverpod Providers with Ref

#dart
#flutter
#riverpod

Since Riverpod 2.6.0, all generated providers can be declared with a Ref argument. Here's how to migrate to the new syntax.

What does flutter pub upgrade do?

What does flutter pub upgrade do?

#dart
#flutter

If you want to upgrade all dependencies to the latest non-major version, ignoring the pubspec.lock file, use flutter pub upgrade.

Firebase Initialization with Multiple Flavors in Dart

Firebase Initialization with Multiple Flavors in Dart

#dart
#flutter
#firebase
#production

An overview of two different strategies for initializing Firebase inside a Flutter app with multiple flavors.

Fixing Build Issues - Nuclear Option

Fixing Build Issues - Nuclear Option

#dart
#flutter
#production

If you have a Flutter project that no longer builds on a specific platform, you can delete the whole folder and generate it again.

Force Update with Remote Config

Force Update with Remote Config

#dart
#flutter
#production

If you ever needed a force update prompt that is controlled remotely, you can use the force_update_helper package.

Show the Licenses in your Flutter app

Show the Licenses in your Flutter app

#dart
#flutter
#production

Your Flutter app should show the licenses for packages in use. This is often a legal requirement, as many open-source licenses require attribution.

Dark and Tinted Icons on iOS 18

Dark and Tinted Icons on iOS 18

#dart
#flutter

How to enable dark and tinted icons on iOS 18 using the flutter_launcher_icons package.

FlutterFire Config with Multiple Flavors (Shell Script)

FlutterFire Config with Multiple Flavors (Shell Script)

#dart
#flutter
#firebase

If your Flutter app uses multiple flavors, you can use the FlutterFire CLI to generate the config files for each flavor.

Remote Config via GitHub Gist

Remote Config via GitHub Gist

#dart
#flutter
#networking

Here's how to remotely control the behaviour of your app by fetching some JSON from a GitHub gist.

Generate Commit Messages with Copilot

Generate Commit Messages with Copilot

#dart
#flutter
#ai

If you're not too picky about how you write your commit messages, this can be a neat little time saver!

Control the Code Generation Order

Control the Code Generation Order

#dart
#flutter
#code-generation

If you're using multiple code generators that depend on each other, you can enforce the code generation order in your build.yaml file.

Async Stream Initialization with async*

Async Stream Initialization with async*

#dart
#flutter

If you want to return a stream that depends on some asynchronous code, you can use async* and yield*

Timing the In-App Review Prompt

Timing the In-App Review Prompt

#dart
#flutter

To avoid prompting users too early, track your desired event and only ask for a review after it is triggered N times.

Working with Multiple Xcode Versions

Working with Multiple Xcode Versions

#dart
#flutter

How to download multiple releases from xcodereleases.com, and switch between them with the xcode-select CLI.

Adding a Navigator Observer

Adding a Navigator Observer

#dart
#flutter
#navigation

By implementing a NavigatorObserver, you can track page views or add navigation breadcrumbs to your error logs.

Flutter DevTools Logging Page

Flutter DevTools Logging Page

#dart
#flutter
#navigation

The Android debug logs can get quite noisy. To work around it, open the DevTools logging page, which will only show the Flutter logs.

BuildContext Extension for Push, Pop

BuildContext Extension for Push, Pop

#dart
#flutter
#navigation

Rather than calling Navigator.of(context), you can define all the push/pop methods inside a BuildContext extension and make your navigation code less verbose.

Stylish Text with ShaderMask and LinearGradient

Stylish Text with ShaderMask and LinearGradient

#dart
#flutter
#widgets

To create a stylish Text, use the ShaderMask widget with a shaderCallback that returns a LinearGradient with begin and end points, along with a list of colors.

How to add a Badge to an IconButton

How to add a Badge to an IconButton

#dart
#flutter
#widgets

The easiest way to add a badge to an IconButton is to use the Badge widget. Use this to show a numeric value or a custom label next to an icon.

How to detect triple taps with RawGestureDetector

How to detect triple taps with RawGestureDetector

#dart
#flutter

Thanks to RawGestureDetector and SerialTapGestureRecognizer, you can implement a custom TripleTapDetector widget.

Flutter Sidebar (VSCode)

Flutter Sidebar (VSCode)

#dart
#flutter

How to use the Flutter VSCode sidebar to access the DevTools and other useful functionality.

DevTools Performance Rebuild Stats

DevTools Performance Rebuild Stats

#dart
#flutter
#performance

Since Flutter 3.24, a new Rebuild Stats feature is available on the DevTools performance page. Use it to spot widgets that rebuild too often.

The CarouselView Widget

The CarouselView Widget

#dart
#flutter
#layouts
#widgets

Since Flutter 3.24, a new CarouselView widget is available. You can set the children's size with itemExtent and shrinkExtent, and use it with any widgets as children.

The dart pub unpack command

The dart pub unpack command

#dart
#flutter

As of Flutter 3.24, a new "pub unpack" command is available. You can use it to download a package locally and easily explore its source code.

The OverflowBar Widget

The OverflowBar Widget

#dart
#flutter
#layouts
#widgets

OverflowBar makes it easy to layout your widgets in a row unless they overflow the available horizontal space, in which case they're arranged as a column.

Futures: await vs unawaited vs ignore

Futures: await vs unawaited vs ignore

#dart
#flutter

When you call a method that returns a Future, you have to choose between using await, unawaited, and ignore. Here's an explanation.

Useful arguments in the log function (from dart:developer)

Useful arguments in the log function (from dart:developer)

#dart
#flutter
#logging

The humble log function has many arguments that can be used to customize the appearance of your logs. Here's how to use them.

Use unawaited for your analytics calls

Use unawaited for your analytics calls

#dart
#flutter

When tracking analytics events in your code, consider using `unawaited` from `dart:async` (analytics calls should be fire & forget).

How to use --dart-define-from-file with .env and json files

How to use --dart-define-from-file with .env and json files

#dart
#flutter
#security
#networking

--dart-define-from-file supports both .env and json files. Here's how to use each variant.

Get the current method name from the Stack Trace (Hack)

Get the current method name from the Stack Trace (Hack)

#dart
#flutter

By doing some string manipulation on the current stack trace, you can extract the current method name (useful for logging).

Hugeicons (4,000 stroke Flutter icons)

Hugeicons (4,000 stroke Flutter icons)

#dart
#flutter
#package

The hugeicons package was recently released, featuring a collection of over 4,000 stroke Flutter icons.

How to Cancel HTTP Requests with CancelToken and Riverpod

How to Cancel HTTP Requests with CancelToken and Riverpod

#dart
#flutter
#networking

You can use CancelToken to stop unnecessary data fetches when users navigate away or to implement "cancel" buttons in your Flutter apps.

TextField with Selection Height Style

TextField with Selection Height Style

#dart
#flutter

You can use BoxHeightStyle to change the selection height style of a TextField (useful for multi-language apps).

The widget build method: DOs and DON'Ts

The widget build method: DOs and DON'Ts

#dart
#flutter

The widget build method can potentially be called in every frame and should not have any side effects.

How to Render Transparent Images with the Opacity Argument

How to Render Transparent Images with the Opacity Argument

#dart
#flutter
#performance

If you need to show a semi-transparent image, use the opacity argument with AlwaysStoppedAnimation rather than adding a parent Opacity widget.

Disposing Fields to Avoid Memory Leaks

Disposing Fields to Avoid Memory Leaks

#dart
#flutter
#static-analysis

Forgetting to dispose controllers in your State class can lead to memory leaks, and the "dispose-fields" rule from DCM can warn you about it.

Flutter: Find Unused Dart Files (VSCode Extension)

Flutter: Find Unused Dart Files (VSCode Extension)

#dart
#flutter

With this VSCode extension, you can remove all the unused assets, files, and dependencies in your Flutter project and decrease your app bundle size.

Conditional Imports for Web/Native APIs

Conditional Imports for Web/Native APIs

#dart
#flutter
#flutter-web

If you try to access a web-specific API on native platforms, your app will crash. Here's how to use conditional imports to solve this problem.

How to use defaultTargetPlatform and kIsWeb

How to use defaultTargetPlatform and kIsWeb

#dart
#flutter
#flutter-web

To detect the current platform, check for kIsWeb beforehand and use it together with defaultTargetPlatform, which doesn't import dart:io.

The Universal Platform Package

The Universal Platform Package

#dart
#flutter
#flutter-web

With the Universal Platform package, you can perform platform detection with a unified syntax on all platforms, including web, but there's a catch.

Useful Aliases for Flutter App Development

Useful Aliases for Flutter App Development

#dart
#flutter
#productivity

A collection of useful aliases to speed up your Flutter app development workflow.

Taking Screenshots with the Flutter CLI

Taking Screenshots with the Flutter CLI

#dart
#flutter
#productivity

How to use the Flutter CLI to save screenshots from connected iOS and Android emulators

How to Define Type Aliases in Dart

How to Define Type Aliases in Dart

#dart
#flutter

Here's how to use typedef to define type aliases for your function and non-function types in Dart.

Use Type Annotations for Safer Code

Use Type Annotations for Safer Code

#dart
#flutter

By adding type annotations to your collections, the Dart analyzer will warn you if you add values of the wrong type.

Prefer const over final over var

Prefer const over final over var

#dart
#flutter

Const is for hardcoded, compile-time constants. Final is for read-only variables that are set just once. Var is for variables that are set more than once.

Flutter Web App Initialization Logic with CSS Loader

Flutter Web App Initialization Logic with CSS Loader

#dart
#flutter
#flutter-web

How to use the web app bootstrap process (new in Flutter 3.22) and add a CSS progress indicator before the Flutter app is ready to take over.

Transform SVG assets at build time (Vector Graphics Compiler)

Transform SVG assets at build time (Vector Graphics Compiler)

#dart
#flutter
#performance

Here's how to use the Vector Graphics Compiler to precompile SVGs at build time for better rendering performance.

JsonCodable (Dart Macros experiment)

JsonCodable (Dart Macros experiment)

#dart
#flutter
#json
#macros

How to use the JsonCodable macro to augment your classes with fromJson and toJson methods

Use SizedBox.shrink() to return an empty box

Use SizedBox.shrink() to return an empty box

#dart
#flutter
#widgets
#layouts

If you need to return an empty widget, SizedBox.shrink() is more performant than an empty Container.

Enabling Asserts in Release Mode in Dart / Flutter

Enabling Asserts in Release Mode in Dart / Flutter

#dart
#flutter

By default, asserts are only enabled in Debug mode. To enable them in Release mode, run with the --enable-asserts flag.

REST Client Extension for VSCode

REST Client Extension for VSCode

#dart
#flutter
#networking

How to send HTTP requests and view the response directly in Visual Studio Code.

How to Hide Generated Dart Files in GitHub PRs

How to Hide Generated Dart Files in GitHub PRs

#dart
#flutter
#code-generation

If you use build_runner and your generated Dart files are added to Git, you can hide them by default in your PRs and diffs. Here's how.

Responsive Flutter Layout with SizedBox & Center

Responsive Flutter Layout with SizedBox & Center

#dart
#flutter
#layouts

Some helper widgets for creating Flutter layouts that grow horizontally up to a given width, then remain fixed at that width.

How to Use Tags in Your Unit and Widget Tests

How to Use Tags in Your Unit and Widget Tests

#dart
#flutter
#testing

Ever wanted to filter tests so you only run the ones you need to? This can be easily done using test tags.

How to Run Multiple Test Variants

How to Run Multiple Test Variants

#dart
#flutter
#testing

You can run a widget test multiple times with the variant argument. Very useful for golden image tests for different screen sizes.

Flutter Tip: Use Composition Aggressively

Flutter Tip: Use Composition Aggressively

#dart
#flutter
#layouts

Create small, reusable widgets that are easier to reason about, and banish the massive build method from existence!

Use DecoratedBox to add Rounded Borders to a Widget in Flutter

Use DecoratedBox to add Rounded Borders to a Widget in Flutter

#dart
#flutter
#widgets

In Flutter you can use DecoratedBox to set a lot of decoration/styling options to your widgets. Here's how.

How to quickly generate some fake data when building Flutter UIs

How to quickly generate some fake data when building Flutter UIs

#dart
#flutter
#package

The faker package lets you generate addresses, names, food, dates, sports... you name it! Here's how to use it.

How to replace SizedBox with compile-time constants for better performance

How to replace SizedBox with compile-time constants for better performance

#dart
#flutter
#layouts
#widgets

A useful tip to write more performant code when using SizedBox as a gap between widgets inside a Row or Column layout.

Use AsyncValue.guard rather than try/catch inside your AsyncNotifier subclasses

Use AsyncValue.guard rather than try/catch inside your AsyncNotifier subclasses

#dart
#flutter
#riverpod

If you have many AsyncNotifier subclasses, using try/catch can be tedious. With AsyncValue.guard you get the same result with less boilerplate.

How to style an ElevatedButton in Flutter

How to style an ElevatedButton in Flutter

#dart
#flutter
#widgets

How to style an ElevatedButton in Flutter, including reusing the same style across all buttons with ThemeData.

Running tests with GitHub Actions

Running tests with GitHub Actions

#dart
#flutter
#CI

How to add a GitHub Actions workflow to automatically run tests when you push your code.

Add Fixed Spacing with the Gap Widget

Add Fixed Spacing with the Gap Widget

#dart
#flutter
#layouts

How to easily add fixed spacing inside Flex widgets such as Columns and Rows or scrolling views.

Using context.mounted in Flutter 3.7

Using context.mounted in Flutter 3.7

#dart
#flutter
#navigation

Since Flutter 3.7, BuildContext has a mounted property that we can check after an asynchronous gap. Here's how to use it.

How to update old Flutter projects with Dart Fix --apply

How to update old Flutter projects with Dart Fix --apply

#dart
#flutter

An overview of what Dart Fix can do for you, along with some useful VSCode productivity tips and settings for Flutter app development.

How to fix

How to fix "SocketException: Connection failed (Operation not permitted)" with Flutter on macOS

#dart
#flutter
#networking

Flutter apps built for macOS need a client network entitlement in order to make network requests. Here's how to configure it.

How to Create DartPad Examples from GitHub Gists

How to Create DartPad Examples from GitHub Gists

#dart
#flutter

DartPad makes it easy to share your Dart & Flutter samples using GitHub gists, and you can even embed them on your website. Here's how.

How to Add a Custom Test Timeout in Flutter

How to Add a Custom Test Timeout in Flutter

#dart
#flutter
#testing

When a test waits for a stream value that is never emitted, it will timeout after 30 seconds (by default). Here's how to make it fail fast with a custom timeout.

How to Use Super Initializers in Dart 2.17

How to Use Super Initializers in Dart 2.17

#dart
#flutter

Since Dart 2.17, you can initialize parameters of the super class with a new shorthand syntax. Here's how.

How to Use Enhanced Enums with Members in Dart 2.17

How to Use Enhanced Enums with Members in Dart 2.17

#dart
#flutter

Since Dart 2.17, we can add members and additional methods when declaring an enum. Here's how.

How to Test Functions that Throw in Flutter

How to Test Functions that Throw in Flutter

#dart
#flutter
#testing

When writing tests for functions that throw, we should not invoke them directly, but rather pass them as arguments using a tear-off.

How to update a Map of key-value pairs in Dart

How to update a Map of key-value pairs in Dart

#dart
#flutter

Ever needed to update a value if a given key already exists, or set it if it doesn't? Here's how to use the Map.update() method to solve this.

How to speed-up Cloud Firestore Xcode builds on your Flutter apps

How to speed-up Cloud Firestore Xcode builds on your Flutter apps

#flutter
#firebase
#devops

How to use the precompiled Firestore iOS SDKs to speed-up Xcode builds on your Flutter apps.

How to disable the default Widget splash effect in Flutter

How to disable the default Widget splash effect in Flutter

#flutter
#dart

Many Material widgets such as InkWell, ElevatedButton, and ListTile show a splash effect when selected. Here's how to disable this.

How to speed up code generation with build_runner in Dart & Flutter

How to speed up code generation with build_runner in Dart & Flutter

#flutter
#dart
#code-generation
#freezed

Two effective techniques for reducing code generation times for Flutter apps that use build_runner.

Dart & Flutter Easy Wins 36-42

Dart & Flutter Easy Wins 36-42

#flutter
#dart

Easy ways to improve your Dart & Flutter code. Published weekly.

Dart & Flutter Easy Wins 29-35

Dart & Flutter Easy Wins 29-35

#flutter
#dart

Easy ways to improve your Dart & Flutter code. Published weekly.

Dart & Flutter Easy Wins 22-28

Dart & Flutter Easy Wins 22-28

#flutter
#dart

Easy ways to improve your Dart & Flutter code. Published weekly.

Dart & Flutter Easy Wins 15-21

Dart & Flutter Easy Wins 15-21

#flutter
#dart

Easy ways to improve your Dart & Flutter code. Published weekly.

Dart & Flutter Easy Wins 8-14

Dart & Flutter Easy Wins 8-14

#flutter
#dart

Easy ways to improve your Dart & Flutter code. Published weekly.

Dart & Flutter Easy Wins 1-7

Dart & Flutter Easy Wins 1-7

#flutter
#dart

Easy ways to improve your Dart & Flutter code. Published weekly.

Hide your Firebase config with .gitignore in Flutter web projects

Hide your Firebase config with .gitignore in Flutter web projects

#flutter
#dart
#firebase
#flutter-web
#git

A useful tip to hide your Firebase config from git in your Flutter web projects.

Easily move the focus between TextFormFields with FocusScopeNode

Easily move the focus between TextFormFields with FocusScopeNode

#flutter
#dart

FocusScopeNode provides a simpler way of move the focus between text fields in your Flutter forms.

Using underscores for unused builder arguments in Dart

Using underscores for unused builder arguments in Dart

#flutter
#dart
#design-patterns

How to remove some noise in your Dart code by using underscores for unused function arguments.

Adding top and bottom separators with ListView.separated

Adding top and bottom separators with ListView.separated

#flutter
#dart
#layouts

How to make your ListViews feel native on iOS by adding top and bottom separators.

All Tutorials

Articles

Browse all 93 articles

Videos

Browse all 35 videos

Tips

Browse all 101 tips