Flutter Articles

In-depth articles about Dart, Firebase & Flutter. Including state management, layouts and much more.

Flutter Articles

How to create a Flutter GridView with content-sized items

#dart
#flutter
#layouts

GridView is only suitable for items with a fixed aspect ratio. Here's how to use the flutter_layout_grid package to render responsive layouts with variable item sizes.

Flutter Tutorial: How to use the Firebase Local Emulator with Cloud Functions

#dart
#flutter
#firebase
#cloud-functions

Let's build a simple mood tracking app and learn how to work with Firestore, Cloud Functions, and the Firebase Local Emulator.

Firebase Cloud Functions: Introduction and Project Setup

#firebase
#cloud-functions

Learn how to setup your first project using Cloud Functions for Firebase. Includes additional resources about Node.js and the Firebase CLI.

Flutter TabBar Tutorial: How to Navigate Programmatically Between Tabs

#dart
#flutter
#navigation

Learn how to use the Flutter TabBar widget to take the user through a sequence of pages, and disable user interaction on the tabs themselves.

AsyncValueWidget: a reusable Flutter widget to work with AsyncValue (using Riverpod)

#dart
#flutter
#state-management
#riverpod

How to create a reusable widget class that helps us when working with asynchronous data from Riverpod providers.

Flutter TextField Validation: How to work with TextEditingController, Form, and TextFormField

#dart
#flutter
#input-validation

A tutorial about text input validation, showing how to work with TextField, TextEditingController, Form, TextFormField as well as their tradeoffs.

How to build a Chat Messaging UI in Flutter

#dart
#flutter
#layouts

A simple and elegant approach to build a Chat Messaging UI with DecoratedBox, Align, and Padding widgets in Flutter.

Flutter: Animated Task Completion Ring with AnimationController and AnimatedBuilder

#dart
#flutter
#animations

How to animate a custom task completion ring using AnimationController and AnimatedBuilder in Flutter.

Flutter: How to Draw a Task Completion Ring with CustomPainter

#dart
#flutter
#animations

CustomPainter is often the way to go when we need to draw some custom shapes in Flutter. Let's see how to use it in practice.

Flutter Timer vs Ticker: A Case Study

#dart
#flutter
#animations

Need a Flutter widget that updates every frame? Here's why using Timer is not a good choice, and why Ticker is a much better solution.

How to Parse JSON in Dart/Flutter with Code Generation using Freezed

#dart
#flutter
#json
#code-generation
#freezed

Tired of writing JSON parsing code by hand? Here's how to automate this with code generation and the Freezed package.

How to Parse JSON in Dart/Flutter: The Essential Guide

#dart
#flutter
#networking
#json

Learn how to parse JSON and define type-safe model classes that can handle validation, nullable/optional values, and complex/nested JSON data.

Side Effects in Flutter: What they are and how to avoid them

#dart
#flutter
#state-management

Mutating state or calling async code inside the build method can cause unwanted widget rebuilds and unintended behaviour. Here are some examples and rules to follow.

How to implement a shake text effect in Flutter

#dart
#flutter
#animations

How to create a custom animation curve and implement a shake effect that can be applied to any widget in Flutter.

Responsive layouts in Flutter: Split View and Drawer Navigation

#dart
#flutter
#layouts
#state-management
#riverpod

How to implement a responsive layout in Flutter by using a split view on large screens and drawer navigation on mobile.

Flutter: Why do TweenAnimationBuilder and AnimatedBuilder have a child argument?

#dart
#flutter
#animations

Why and when to use the child widget argument to optimize Flutter performance when working with TweenAnimationBuilder and AnimatedBuilder.

HSL Colors Explained: What they are and when to use them in Dart/Flutter

#dart
#flutter

Going from RGB to HSL: How to more easily reason about colors as hue, saturation and lightness, and how to use HSL in Flutter.

Migrating a Flutter & Firebase app to Null Safety: A Case Study

#dart
#flutter
#null-safety

Migrating Flutter apps to Null Safety can be a challenging process. Here I show how to make this as painless as possible, using a non-trivial app as an example.

Flutter State Management with Riverpod: The Essential Guide

#dart
#flutter
#state-management
#architecture
#riverpod

A complete guide to the Riverpod package for Flutter state management. Included: core concepts & how to use all the available providers. Updated to Riverpod 1.0.

Flutter vs React Native - Which is the Best Choice for Your Next App?

#flutter
#react-native
#dart

Should you choose Flutter or React Native for your next app? This article offers an in-depth overview of the two frameworks, along with their pros and cons.

'keytool' is not recognized as an internal or external command: How to fix this on Windows and macOS

#android
#flutter

This step-by-step guide shows how to install keytool and add it to your system PATH on Windows and macOS.

Yay! Implicit Downcasts are no longer allowed in Dart 2.9

#dart

What implicit downcasts are, why they make your code unsafe, and how to avoid them.

Case Study: Automating UI/Integration Tests with Flutter Driver and Codemagic

#flutter
#dart
#testing
#CI

Let's see how to write integration tests with Flutter Driver, how they differ from widget tests, and how to run them with Codemagic.

Flutter: Designing an Authentication API with Service Classes

#flutter
#dart
#firebase
#authentication
#architecture

Let's see how use service classes to encapsulate 3rd party libraries and APIs, and decouple them from the rest of the application. We will use authentication as a concrete example of this.

Flutter: Global Access vs Scoped Access with Provider

#flutter
#dart
#dependency-injection
#provider
#firebase
#authentication
#scoped-access

This article shows how to use scoped access with Provider when using service classes in our Flutter apps.

Super Simple Authentication Flow with Flutter & Firebase

#flutter
#dart
#firebase
#authentication

In this article we implement a simple authentication flow in Flutter, in less than 100 lines of code.

Widget-Async-Bloc-Service: A Practical Architecture for Flutter Apps

#flutter
#dart
#bloc
#state-management

This article introduces a new architectural pattern that I often use in my Flutter Apps. It is inspired by BLoCs and RxVMS.

Dart vs Swift: a comparison

#flutter
#dart
#swift
#ios

Detailed side-by-side comparison of language features between Dart 2.1 and Swift 4.2.

Flutter will change everything: A Follow Up

#flutter
#dart
#swift
#ios

Clarifications and apologies following my previous article.

Flutter will change everything, and is an excellent choice for iOS development

#flutter
#dart
#swift
#ios

Controversial article with some history and a detailed comparison between Flutter and native iOS development. Includes an example showing how to build a contact list in Flutter and iOS.

My Favourite List of Flutter Resources

#flutter
#dart

Flutter is awesome! Big thanks to the Flutter team and all the people in the wider community that keep pushing this project to new heights and sharing new learning material.

Flutter: The power of small and reusable widgets

#flutter
#dart
#layouts
#refactoring

Let's learn about color gradients, composition, writing reusable UI code, and CupertinoSegmentedControl.

Flutter: Building a Flight CO2 Calculator (Part 1)

#flutter
#dart

Let's see how to load a CSV file into strongly-typed model classes, that can be used to calculate CO2 emissions for flights between two airports.

Flutter: Adding Animated Overlays to Your App

#flutter
#dart
#navigation
#layouts

Let's see how to use some custom code to add animated overlays and reveal action options from a FAB.

Flutter: BottomAppBar Navigation with FAB

#flutter
#dart
#navigation
#layouts

How to dock a floating action button in the middle of a BottomAppBar.

Flutter Bottom Navigation Bar with Multiple Navigators: A Case Study

#flutter
#dart
#navigation

A guide to implementing multiple independent navigation stacks with BottomNavigationBar in Flutter.

Flutter: My favourite keyboard shortcuts

#flutter
#dart
#productivity

List of the most useful IntelliJ/Android Studio shortcuts for better productivity.

Intro to Platform Channels: Building an Image Picker in Flutter

#flutter
#dart
#platform-channels
#ios
#swift

Let's see how to use platform channels by building an image picker on iOS, and using it from the Dart code.

Take your Flutter tests to the next level with abstract classes and dependency injection

#flutter
#dart
#testing

This article shows how to write testable code in Flutter, and take your widget tests to the next level.

How fast is Flutter? I built a stopwatch app to find out

#flutter
#dart
#performance

In-depth performance comparison for a stopwatch app built in native iOS vs Flutter.

All Tutorials

Videos

Browse all 75 videos

Articles

Browse all 40 articles

Tips

Browse all 16 tips

Get the best Flutter tutorials, right in your inbox.

Join over 16,000 developers who receive my weekly Flutter email course & newsletter:

No spam, ever. Unsubscribe at any time.