learning-flutter

Flutter codelabs, cookbooks and other tutorials.

Slides

Slack

Recommendations

Beginners

Setup

Follow the official guide.

• flutter is installed
• your IDE "understands" Dart code
• you can run a Flutter app on a physical device or emulator/simulator

Learn

After you've set up your development environment, I find that these are the best codelabs for people with no Flutter or Dart experience.

1. Intro to Dart for Java Developers - 20 min
2. Write Your First Flutter App (Part 2.) 43 + 43 minutes
3. Firebase for Flutter - 61 min

Resources

Codelabs

Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application.

Cookbook

The cookbook contains recipes that demonstrate how to solve common problems while writing Flutter apps. Each recipe is self-contained and can be used as a reference to help you build up an application.

YouTube

• Official Flutter channel

Widget of the Week

Short videos (~1 min) introducing a widget and its features and usage.

The Boring Flutter Development Show

A list of YouTube videos (each video is around an hour long) where Flutter developers work on an app or task. Almost no editing, so you can see all the mistakes and observe the thought process of the developers.

Fluttery

Implement beautiful custom user interfaces with Flutter. Videos show all necessary steps to create pretty advanced UIs and are usually ~2-3 hours long.

Flutter in Focus

Best practices explained in 5-10 minutes.

Flutter tutorial for Beginners by Academind/Maximilian Schwarzmüller

Detailed, very clear (though it's longer than 3 hours, so you won't be able to finish it at the study jam) video tutorial.

awesome-flutter

Awesome list of Flutter-related content.

Examples

Codelabs

• Intro to Dart for Java Developers - 20 min

  • Example solution

• Write Your First Flutter App

  • Part 1 - 43 min
  • Part 2 - 43 min
  • Example solution

• Building a Cupertino app with Flutter - 51 min

  • Example solution
  • "just copy these 100 lines of code into your project and voila, everything looks amazing, look at how much you got done in 51 minutes"
  • the provider package has changed its API and other mistakes in the guide

• Material Design for Flutter

  • MDC-101 Flutter: Material Components (MDC) Basics (Flutter) - 14 min
  • MDC-102 Flutter: Material Structure and Layout (Flutter) - 14 min
  • MDC-103 Flutter: Material Theming with Color, Shape, Elevation, and Type (Flutter) - 34 min
  • MDC-104 Flutter: Material Advanced Components (Flutter) - 20 min
  • Example solution
  • Very little magic in the first three codelabs, though there are some "prepated" widgets that contain code that's a bit too complicated.
  • Backdrop menu is a bit tricky and details were not well explained.
  • Authors didn't pay much attention to Navigation details (users can go back to home product listing after they logged out).

• Firebase for Flutter - 61 min

• Adding Google Maps to a Flutter App - 35 min

• Build a Photo Sharing app with Google Photos and Flutter - 46 min

• Building Beautiful UIs with Flutter - 90 min