Flutter Resources

Flutter Logo

My Flutter YouTube Playlist

Flutter Day Livestream | Session 3: Dart
They asked the question I submitted on Twitter! <surprised-face>

Google Flutter Cookbook
Flutter has really excellent docs and cookbook examples

Tame those TextStyles! — gskinner blog
Good advice on structuring a stylesheet for Flutter.

The new ‘animations’ package explained — gskinner blog
Quick rundown of the new animations with previews and code samples.

Android App: Flutter Vignette Showcase
App by GSkinner/team that explores some of their transition animation effects.

Deep Dives by Deven Joshi

Adding Google Fonts to a project
Fonts can be downloaded at runtime or embedded in the app download file.

Dart/Flutter – Convert Object, List to JSON string
Everything you need to know about converting objects to json, including nested objects.

Teachable Machine – by Google
Train a computer to recognize your own images, sounds, & poses.

Flutter: SliverAppBar with Stretchy Header
Nice zooming effect on pulldown of the SliverAppBar.

Asynchronous programming in Flutter
Here’s a 4 part video series by the Flutter in Focus team.

  1. Isolates and Event Loops
  2. Dart Futures
  3. Dart Streams
  4. Async/Await
  5. Generator Functions

Here’s the entire Flutter in Focus playlist that covers everything from Flutter 101 — building a widget — to Animation Deep Dive.

Excellent article on sorting a list: Dart – Sorting List with Comparator and Comparable

Flutter: The Advanced Layout Rule Even Beginners Must Know
Flutter offers a huge range of layout rules. This article covers most all cases.

How to create your own pull to refresh / custom refresh indicator widget in Flutter.

Flutter Animated Logo with CustomPainter
Nice tutorial on how to recreate the Flutter logo with animations.

Flutter Launcher Icons
A command-line tool which simplifies the task of updating your Flutter app’s launcher icon. Fully flexible, allowing you to choose what platform you wish to update the launcher icon

How to embed a Flutter application in a Website using DartPad

How to create Card Carousel in Flutter?

How To Create An Mobile App Like Netflix In 2020? (Features, Business Model & Cost)
Good reference article on the cost of app development and pros-cons of native vs cross-platform solutions.

Flushbar is a simple little widget, with lots of options, for showing dismissible messages to the user, like errors or important updates.

Material IO: The motion system
The motion system is a set of transition patterns that can help users understand and navigate an app.

Dart.DEV: A tour of the Dart language
This page shows you how to use each major Dart feature, from variables and operators to classes and libraries.

Network-Aware Flutter Application using Provider and Data Connection Checker
Determine if user has a data connection.


The motion system
The motion system is a set of transition patterns that can help users understand and navigate an app.
Transition Patterns, Container Transform, Shared Axis, Fade Through, Fade

Speed adjustments make transitions smooth and responsive.
Controlling Speed, Duration, Easing

Transition choreography is a coordinated motion sequence that holds the user’s focus while an interface adapts.
Sequencing, Transformation, Focal Elements

Motion can be customized to express your brand’s style.
Applying customizations, Speed, Motion Paths, Oscillation, Transition Patterns, Elevation, Stagger

Themes in Flutter : Part 1
A nice 3 part series on theme properties with code.

Building Responsive Layouts

Developing for Multiple Screen Sizes and Orientations in Flutter (Fragments in Flutter)

Build Responsive UIs in Flutter

Flutter — Effectively scale UI according to different screen sizes


8 mobile UX best practices every designer should consider


How to Build Responsive Applications With Flutter


Firebase Push Notifications: Notify your users

Widget Overviews

Top 5 Flutter Box Widgets You Should Know
Understand the difference and practical use of the top 5 Flutter Box layout widget.

Flutter — BoxDecoration Cheat Sheet

Custom Components


A package to help build customisable timelines in Flutter

Performance testing of Flutter apps

How To Animate Icons In Flutter
Step by Step guide on using Flutter’s AnimatedIcons widget.

The main function in Flutter

Why Flutter Is The Best Choice To Build A Startup Mobile App

Deep dive into Flutter DatePicker

CRUD operations — Flutter & Firebase

Internationalizing and Localizing Your Flutter App
Learn how to use the flutter_localization and Intl packages to easily localize and internationalize your app, making it accessible to users in different locales.

Flutter vs React Native vs Native: Deep Performance Comparison
Let’s compare FPS, CPU, Memory, and GPU performance of popular mobile development tools on everyday life tasks.

18 Things You Can Do to Remove MySQL Bottlenecks Caused by High Traffic (Part One)

Flutter vs React Native- Which is the Best Choice for 2020?

Adding a splash screen to your mobile app

In-App Purchases with Flutter: A Comprehensive Step-by-Step tutorial

Flutter’s Stateful Widget cheat sheet
A brief overview of Stateful widgets in Flutter!

Animate a sparkler
Let’s be creative and implement a sparkler that could replace the usual loading indicator by burning from left to right.
(Could be a useful resource for rebuilding Ballance.)

Export your widget to image with flutter
(I’ll need this for adding the social media sharing options in the RunPee app.)

How to debug layout issues with the Flutter Inspector

Dough—A tool to help you create squishy UI effects in Flutter
This package offers a variety of Dough widgets (widgets that are squishy).

What’s new with the Slider widget?

Level up your Flutter apps with autofill

Dart/Flutter – Convert/Parse JSON string, array into Object, List

AWS Amplify for Flutter
Many developers use Firebase as their backend services when it comes to a Flutter project. We have a new option now, AWS Amplify. This tutorial will be covering AWS Cognito.

Input formatting
We will be doing input formatting in TextField in Flutter

AlertDialogs, Single Choice Dialog, Multiple Choice Dialog, TextField Dialog

Solve Async Callbacks with FutureBuilder!
A Future is used to represent a potential value, or error, that will be available at some time in the future.

How to implement Drag And Drop (ReOrderable)GridView under 2 minutes

Flutter testimonial: eBay Motors: Accelerating With Flutter


Leave a Reply

Your email address will not be published. Required fields are marked *