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
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

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

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
#networking

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

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

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

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

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

Add Fixed Spacing with the Gap Widget

Add Fixed Spacing with the Gap Widget

#dart
#flutter
#CI

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

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 91 articles

Videos

Browse all 34 videos

Tips

Browse all 48 tips