Flutter - Learn how to build mobile apps for iOS and Android

This Flutter Skill Path equips learners with the essentials of Flutter development, combining interactive tutorials and practical examples. From setting up the environment to deploying apps, participants will build real-world projects, mastering both Dart fundamentals and Flutter widgets for dynamic, cross-platform mobile applications. Each module is designed to incrementally enhance skills, ensuring a thorough understanding of state management, API integration, and user interface design, preparing learners for professional app development. 

By Chris Koch · Instructional designer, Instructor and Sr. Software Engineer

Skill objectives

Chapter 01

What is Flutter and how to get started

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. In this first chapter we will get familiar with it.

Skills: Flutter, Dart, Mobile App Development Tools

Video8min

What is Flutter?

An introduction to Flutter and what problem it solves 

Link10min

Best Flutter alternatives

Flutter is not the only framework to develop apps (or websites) across multiple platforms. The biggest competitor is react native. Just to get started, it would be a good idea to get familiarize yourself with the available options and their advantages and disadvantages. 

Link5min

Dart overview

The programming language for Flutter is Dart, which is very similar to Javascript. Although you should pick it up quickly if you know any programming language. 

Link15min

Dart basics

To go a bit more into Dart, this source covers in more detail how to use the language. For example how to create variables, functions and classes; work with asynchronous data and  how to add exceptions. 

Video11min

Installing Flutter (Windows)

With the basics out of the way we can install Flutter. Which requires quite a few components: You need a code editor (VS code in all likelihood), Android studio and the flutter files themselves. 
IMPORTANT: On Windows you can only export android apps; to make iOS/iPadOS apps you will need macOS. This is a limitation by Apple that no framework can get around. 

Video13min

Installing Flutter (macOS)

Installing Flutter on macOS works basically like on Windows except now you can install Xcode, which lets you develop for and simulate iOS/iPadOS devices. 

Chapter 02

Introduction to basic concepts of Flutter

This chapter will introduce to the basic concepts and scenarios you will find in Flutter.

Video12min

Flutter basic training

The basics of Flutter to actually use it. Most importantly, this video covers the basics in terms of widgets to use flutter. This is vital to master the fundamental building blocks like buttons, text and general design of a flutter app. 

Video1h 32min

Building your first Flutter app

Your first proper app. This video goes into much more detail to actually build an app and use the features of Flutter for a real project. Combined with the previous video this should give you a reasonable overview of the basic features of Flutter. 

Link10min

Basic Flutter widget list

An overview of the major flutter widgets. 

Video7min

Stateful vs stateless widgets

One of the parts that can be confusing early on in Flutter are stateless and stateful widgets: In the most basic sense, any app has parts that never change (like some textfields or a basic button) for those we have stateless widgets. Most elements, however, do change and need to dynamically display new information. For that, flutter provides stateful widgets which can change depending on the state. 

Link45min

Creating layouts

Flutter is extremely flexible when it comes to layouts and you can arrange widgets in basically any way you like. For that, you have a lot of layout methods and you can add widgets as children to other widgets. For example, adding children to a row widget will arrange them in a row. 

Video2min

Hot reload

A super useful feature in Flutter is hot reload: It lets you rebuild your project immediately and lets you see updates extremely fast. This makes app development much faster. 

Video5min

Adaptive vs responsive

The main reason for using Flutter is to have a single codebase that can be deployed to a range of devices (like Android and iOS) and screen sizes (your app should work on a tiny phone and a tablet). For that to work, Flutter needs to know what device it is running on and you need to design the app in such a way that you don't duplicate code. 

Video39min

Responsive design

This video goes into more detail on how to actually create responsive designs in practice to create an interesting layout. It also covers how to add breakpoints between layouts. 

Video12min

Using the different style widgets and properties in Dart's Flutter Framework

How to style Flutter widgets like rounded corners, colors, gradients, borders, text styles etc. 

Link10min

Using themes

Usually, you don't want to manually apply the same theme to every single widget and instead use a theme that was defined in a central place. That way you can update the styling in a central place and update everything at once. 

Video8min

Top 7 Flutter animations

To make your apps much more interesting you can also add animations, for which Flutter has a range of tools like AnimatedSize or AnimatedPositioned. These let you create basic animations. 

Chapter 03

Flutter advanced concepts

From animations to several more advanced concepts, most of this chapter has videos you can learn from to start using Flutter for more complex scenarios.

Skills: Flutter

Video17min

Flutter Forward - Making UI Animations easy & fun

A module to create animations much more easily. 

Video9min

Flutter - Tinder cards swipe

Another interesting package to extend Flutter. This one is quite simple: It lets you add a tinder style card. 

Video14min

Riverpod simplified

Riverpod is an external package that makes it much easier to manage the state of Flutter widgets. 

Video7min

Flutter - Riverpod tutorial

A playlist that goes into much more detail on Riverpod and how to integrate it into a Flutter project. You can find the link to the playlist here: https://www.youtube.com/playlist?list=PL4cUxeGkcC9i88WGZ9eIfQUWRgPstLFLp 

Video10min

Flutter provider tutorial

Riverpod is not the only package to control states in Flutter. A more simple one that you encounter a lot is called Provider and it works in a similar way to Riverpod; you encounter it quite often in tutorials and simple apps. 

Video9min

Canvas drawing

You can create any kind of drawing using the Canvas widget, this is a powerful widget that helps a lot to expand your app via custom animations and images. 

Link20min

How to use the GestureDetector class

For a good mobile app you want to have access to all the available touchscreen inputs; so far we only covered basic swipes and button presses. But Flutter can detect all inputs via the GestureDetector class; thus giving you a lot more options for the input. 

Video44min

How to build a physics game with Flutter

Flutter can also be used for Game development. The Flame engine is the most common way of approaching this topic. 

Chapter 04

Integrating Firebase with Flutter

Firebase provides Flutter apps with a robust backend, real-time databases, authentication, analytics, and hosting, enhancing development speed and scalability.

Skills: Firebase, Flutter

Video3min

Firebase in 100 seconds

A short video to outline what Firebase is and what it does (it's a database to add online functionality to your Flutter app) 

Video41min

What is Firebase and how to use it

A more detailed video on how Firebase works and how you can use it. 

Link20min

Add Firebase to your Flutter app

A detailed guide on how to add Firebase to your Flutter app. 

Video3min

Add Firebase to your Flutter project

A detailed guide on how to add Firebase to your Flutter app. 

Video1h 5min

Minimal chat app

A minimal chat app to look at the Firebase integration in a more practical way. Using a chat app is a good way to store and transfer data across devices and users. 

Chapter 05

Practice with Flutter

It's time to put your skills into practice with this chapter! We will learn with a bunch of examples and tutorials that will help you build your first Flutter applications!

Skills: Flutter

Video26min

Flutter Basics by a REAL Project

A recap of the major Flutter concepts in a real project. 

Video25min

Create a QR code scanner

Creating a QR scanner. 

Video39min

Let's clone a dribble design using Flutter!

Dribble is website where ui designers share their ideas and  concepts; it is an excellent resource to get good at design. If you want to master design in Flutter you can simply take a bunch of the  concepts there and translate them into Flutter apps. 

Video13min

Minimalist weather app

Building a minimalist weather app in Flutter. 

Video34min

Flutter ToDO App - Tutorial for beginners

Creating a ToDo app. 

Video1h 3min

Flutter calculator app - Tutorial for beginners

Creating a Calculator app. 

Video25min

Analog clock light & Dark theme

Creating an analog clock. 

Chapter 06

Exporting to iOS and Android

This final chapter is very important because you will learn how you can now port your Flutter code into apps for the iOS and Android store.

Skills: iOS App Development, Android Development

Link30min

Flutter export to Android

How to release a flutter project on Android. 

Link30min

Flutter export to iOS

How to release a flutter project on iOS. 