Responsive layouts in Flutter: Split View and Drawer Navigation
17 min read
How to implement a responsive layout in Flutter by using a split view on large screens and drawer navigation on mobile.
How to implement a responsive layout in Flutter by using a split view on large screens and drawer navigation on mobile.
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.
And in-depth performance comparison of my new home page, built with Flutter web vs standard web technologies. All benchmarks were run with Google PageSpeed Insights and WebPageTest.org.
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.
Let's build a simple mood tracking app and learn how to work with Firestore, Cloud Functions, and the Firebase Local Emulator.
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.
A tutorial about text input validation, showing how to work with TextField, TextEditingController, Form, TextFormField as well as their tradeoffs.
How to create a reusable widget class that helps us when working with asynchronous data from Riverpod providers.
A simple and elegant approach to build a Chat Messaging UI with DecoratedBox, Align, and Padding widgets in Flutter.
How to style an ElevatedButton in Flutter, including reusing the same style across all buttons with ThemeData.
The faker package lets you generate addresses, names, food, dates, sports... you name it! Here's how to use it.
In Flutter you can use DecoratedBox to set a lot of decoration/styling options to your widgets. Here's how.
An overview of Flutter's built-in widgets for managing state, along with links to the best resources from the official Flutter documentation.
A detailed overview of a production-ready architecture that I've fine-tuned over the last two years. You can use the included starter project as the foundation for your Flutter & Firebase apps.
How to animate a custom task completion ring using AnimationController and AnimatedBuilder in Flutter.
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.
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.
Learn how to parse JSON and define type-safe model classes that can handle validation, nullable/optional values, and complex/nested JSON data.
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.
Tired of writing JSON parsing code by hand? Here's how to automate this with code generation and the Freezed package.
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 create a custom animation curve and implement a shake effect that can be applied to any widget in Flutter.
Learn how to use the most common Flutter animation APIs with examples and a free gallery app on GitHub.
A complete tour of Null Safety & non-nullable types, the syntax changes they introduce in Dart 2.12, and how to use them in practice.
How to use animations in Flutter to spice up a fun game written in Dartpad. Learn about implicit animations, AnimatedAlign, duration and curves.
Why and when to use the child widget argument to optimize Flutter performance when working with TweenAnimationBuilder and AnimatedBuilder.
How to use Flutter Hooks or State subclassing to reduce your AnimationController boilerplate code.
Going from RGB to HSL: How to more easily reason about colors as hue, saturation and lightness, and how to use HSL in Flutter.
![Flutter Animations: Interactive Page Flip Widget [Part 2]](/videos/flutter-animations-page-flip-widget-part2/images/cover.webp)
How to build an interactive page flip widget using Flutter's AnimationController, AnimationBuilder, gesture detectors and custom 3D matrix transforms (part 2).
How to build an interactive page flip widget using Flutter's AnimationController, AnimationBuilder, gesture detectors and custom 3D matrix transforms (part 1).
Many Material widgets such as InkWell, ElevatedButton, and ListTile show a splash effect when selected. Here's how to disable this.
Mixing UI and logic inside Flutter widgets is bad. Here's how to refactor a simple app for better separation of concerns, immutability, and type safety using Freezed & State Notifier.
Two effective techniques for reducing code generation times for Flutter apps that use build_runner.
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.
I published a directory of all my open source Flutter apps and projects on GitHub. Here's where to find it.
A guide to implementing multiple independent navigation stacks with BottomNavigationBar in Flutter.
A curated list of useful Dart tips that will improve your coding style as a Flutter developer.
This is the eigth chapter of my Complete Dart Course, featuring a full overview of Null Safety in Dart.
This is the seventh chapter of my Complete Dart Course, showing how to process CSV files in Dart.
This is the sixth chapter of my Complete Dart Course, showing how to use collections in Dart (lists, sets, maps).
This is the fifth chapter of my Complete Dart Course, showing how to build a command line app in Dart to play a game of Rock, Paper and Scissors.
This is the fourth chapter of my Complete Dart Course, covering control flow directives such as if/else, while/for loops, switch and enumerations.
This is the third chapter of my Complete Dart Course, covering the Dart Type System, and how to use var, final, const and dynamic.
This is the second chapter of my Complete Dart Course, covering the basics of the Dart Language.
This is the first chapter of my Complete Dart Course.
I'm launching a Complete Dart Course for beginners with over 8 hours of content, exercises, practical projects and more!
Easy ways to improve your Dart & Flutter code. Published weekly.
Easy ways to improve your Dart & Flutter code. Published weekly.
Easy ways to improve your Dart & Flutter code. Published weekly.
Easy ways to improve your Dart & Flutter code. Published weekly.
Easy ways to improve your Dart & Flutter code. Published weekly.
Easy ways to improve your Dart & Flutter code. Published weekly.
What implicit downcasts are, why they make your code unsafe, and how to avoid them.
Learn about Flutter layout basics with over 2 hours of in-depth content (free sample from my Flutter & Firebase course)
Introduction to Flutter: the widget tree, stateless and stateful widgets, hot reload and hot restart, and a detailed explanation of the default counter app.
How to create your own Dart packages from existing apps, and other things you need to know.
8 top tips that will save you time in your Flutter web projects.
Best practices for implementing search with RxDart in Flutter, using the GitHub Search REST API as an example.
In-depth tutorial explaning combineLatest and data modeling with movie favourite example Flutter app.
A useful tip to hide your Firebase config from git in your Flutter web projects.
Master the basics of REST APIs and the Dart http package. Build a Coronavirus tracking application following best practices.
Second chapter of my course about building a Coronavirus Tracker App with the nCoV 2019 REST API.
First chapter of my course about building a Coronavirus Tracker App with the nCoV 2019 REST API.
Master the basics of REST APIs and the Dart http package. Build a Coronavirus tracking application following best practices.
Take-home projects are a task often given to candidates during the interview process. This article shows a hypothetical assignment that I would give to candidates interviewing for a Flutter developer role.
This tutorial shows how to use Flutter custom painters to draw a happy face on screen with Dartpad, starting from scratch. Included: drawing custom shapes with Canvas and Paint, and layout considerations when using CustomPainter.
FocusScopeNode provides a simpler way of move the focus between text fields in your Flutter forms.
How to remove some noise in your Dart code by using underscores for unused function arguments.
How to make your ListViews feel native on iOS by adding top and bottom separators.
CodeWithAndrea.com is a brand new website about high-quality Flutter tutorials. It will contain all my YouTube videos, articles and courses.
Evaluating Flutter from various criteria: Portability, Language Tooling and Features, Documentation, Performance, Testing, Community, Package Ecosystem, Maintainer Commitment and many more.
Dart extensions unlock a few interesting use cases in Flutter apps. This tutorial shows how to enable them, what they are, when to use them, and when not to.
Multi-part tutorial on how to choose and upload an avatar image to Firestore. Part 3 shows more advanced use cases of Provider to reduce boilerplate code, deal with navigation, and minimise unwanted widget rebuilds.
Multi-part tutorial on how to choose and upload an avatar image to Firestore. Part 2 shows how to use MultiProvider to create multiple services, and how to deal with stream dependencies.
Let's see how to write integration tests with Flutter Driver, how they differ from widget tests, and how to run them with Codemagic.
Multi-part tutorial on how to choose and upload an avatar image to Firestore. Part 1 is an overview of initial project setup, and shows how to connect things together with Provider.
Essential guide to Provider for state management in Flutter. This tutorial shows how to refactor the counter app with Provider, and includes in-depth explanations about ChangeNotifier, ChangeNotifierProvider, Provider.of, Consumer and ValueNotifier.
Introduction to Provider, a popular package used for dependency injection and state management in Flutter. This tutorial shows how to use it to enable flavors in your Flutter apps.
Overview of the tools I use in my Flutter app development workflow. Including Sketch, Supernova, VS Code, GitUp, GitHub, Firebase, Codemagic.
In-depth overview of Slivers and how to use them (part 2). Includes a demo app showing how to use SliverList, SliverGrid, SliverToBoxAdapter, SliverFillRemaining.
In-depth overview of Slivers and how to use them (part 1). Includes a demo app showing how to use SliverAppBar and SliverPersistentHeader.
Overview of the 'Dart as UI' features introduced in Dart 2.3. Uses a fitness tracker custom UI as an example.
Overview and practical use cases of type inference, final & const, named & positional parameters, @required & default values.
A comparison of different state management techniques, using a simple authentication flow as an example.
Code walkthrough for the authentication code in my Flutter & Firebase reference authentication demo on GitHub.
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.
Introducing my reference authentication demo with Flutter & Firebase on GitHub, supporting multiple authentication methods and best coding practices.
This article shows how to use scoped access with Provider when using service classes in our Flutter apps.
In this article we implement a simple authentication flow in Flutter, in less than 100 lines of code.
This article introduces a new architectural pattern that I often use in my Flutter Apps. It is inspired by BLoCs and RxVMS.
Continuation on my video series on how to build a login flow with Firebase. It shows how to use StreamBuilder with the onAuthStateChanged stream to simplify authentication state logic in Flutter apps.
Dart introduction covering if & else statements, the ternary operator, while and for loops, closures and the fold method, enumerations and switch statements.
Dart introduction covering list, maps and generics with type annotations.
Dart introduction covering classes, including class & super constructors, instance methods, inheritance, base Object classes and the toString() method, abstract classes and computed properties.
Dart introduction covering functions, including return types, optional parameters, nullability and default values, named parameters and the arrow operator.
Dart introduction showing how to write a simple program in Dartpad. Includes variable declaration and initialization, string interpolation, type inference, var, final and dynamic.
Detailed side-by-side comparison of language features between Dart 2.1 and Swift 4.2.
Clarifications and apologies following my previous article.
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.
Tutorial showing how to switch between Material and Cupertino widgets, and increase code reuse by building a platform-aware abstract base class with concrete sub-classes. Includes an overview of dialogs and their platform-specific differences.
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.
Let's learn about color gradients, composition, writing reusable UI code, and CupertinoSegmentedControl.
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.
Overview of regular expressions (regex). How to implement a Regex validator in Dart and integrate it with Flutter's TextField widget, so that we can validate user input.
Let's see how to use some custom code to add animated overlays and reveal action options from a FAB.
How to dock a floating action button in the middle of a BottomAppBar.
Deep dive into widget tests. Introduces WidgetTester, Finder, matcher objects, and shows how to write tests for a login screen. Includes test mocks, mockito, acceptance criteria.
How to extract business logic from your apps into testable classes, and write unit tests in Flutter. Uses a login demo example to write email & password validation tests.
How to use InheritedWidget to provide scoped access to dependencies within a widget tree, as opposed to constructor dependency injection.
How to implement a Firebase-backed multiple-counter app with different state management techniques. Evaluation of their tradeoffs.
How to build layouts with scrollable pages, lists, grids, and other convenience widgets. Includes slivers and their usage to create a hero image effect.
List of the most useful IntelliJ/Android Studio shortcuts for better productivity.
How to build basic layouts in Flutter. Also included: MainAxisAlignment, MainAxisSize, CrossAxisAlignment, Baseline, AlignmentDirectional, LayoutBuilder, SizedBox.
How to add an avatar image to your app by using FutureBuilder and the RoboHash API. Part 3: customising appearance with BoxDecoration, adding a border with a circle shape and a background gradient, and more.
How to add an avatar image to your app by using FutureBuilder and the RoboHash API. Part 2: creating a configurable Avatar class, using the http package, and using FutureBuilder to load content asynchronously and handle loading / success / error states.
How to add an avatar image to your app by using FutureBuilder and the RoboHash API. Part 1: quick tour and project setup.
Login and registration flow with Firebase. Part 6 shows how to create a home page and complete the sign out flow.
Login and registration flow with Firebase. Part 5 shows how to add a root widget and control what UI to show depending on authentication state.
Login and registration flow with Firebase. Part 4 shows how to redirect user to a welcome screen after logging in. Also how to refactor the authentication code into a separate reusable class.
Let's see how to use platform channels by building an image picker on iOS, and using it from the Dart code.
Login and registration flow with Firebase. Part 3 shows how to sign in with Firebase authentication, add the registration flow, write asynchronous code with async/await, and handle errors.
Login and registration flow with Firebase. Part 2 shows how to build an email and password form with validation, and how to add Firebase to the project (iOS setup included).
Login and registration flow with Firebase. Part 1 includes an introduction to Flutter, a preview of the login and registration flow, and the initial project setup.
This article shows how to write testable code in Flutter, and take your widget tests to the next level.
In-depth performance comparison for a stopwatch app built in native iOS vs Flutter.