Learn to build apps that work on Android, iOS, Web, and Desktop
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase (flutter.dev). In this course, we will dive into Flutter development by building 5 applications from scratch. We will cover building great user interfaces, navigation, persistent storage, network requests (API calls), managing state, integration with Firebase, and all the concepts you need to start bringing your ideas to life. A detailed outline of the course curriculum is shown below:
Environment Setup (Slides)
This section will cover setting up your development environment and getting all the tools you need to start developing apps with Flutter
- Downloading the Flutter SDK
- Getting Android Studio and Xcode
- Git
- nodejs
- Surge
- VSCode
- Downloading useful plugins (flutter, dart, and sublime text key map)
Project 1: Building a personal portfolio
In this section, you will build and deploy a personal portfolio application that you can share with the world. You will cover the following topics:
- Creating a new project
- Running your app
- Hot Reload and Hot Restart
- Dart data types
- Stateless widgets
- User interactions with Buttons
- Adding assets and third party dependencies
- Web deployment using surge
- Running app in release mode
Project 2: Building a Pokédex app
In this section, you will build and deploy a Pokédex application that displays a list of Pokémon. You will cover the following topics:
- Navigation
- Working with ListViews
- Transferring data between screens
- Object-oriented programming in Dart
- Generating launcher icons and a splash screen
Project 3: Building a cryptocurrency tracker
In this section, you will build and deploy a cryptocurrency tracker that fetches data from an API and displays it on the screen. You will cover the following topics:
- Stateful widgets
- Managing state
- Networking requests (API calls) using the Dio Package
- Working with JSON
- Factory constructors
Project 4: Building a notes app
In this section, you will build and deploy a notes app that persistently stores data across app loads. You will cover the following topics:
- Persistent data storage
- Shared preferences
- Hive database
- Working with FutureBuilders
- Working with GridViews
- Forms and input validation
Project 5: Building a real-time chat application using firebase
In this section, you will build and deploy a real-time chat application with email authentication using firebase. You will cover the following topics:
- Firebase integration
- User authentication with email and password
- Email verification
- Working with StreamBuilders
- Real-time data with Firestore
iOS (info.plist)
<key>LSApplicationQueriesSchemes</key>
<array>
<string>https</string>
<string>http</string>
</array>
Android (AndroidManifest.xml)
<queries>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https" />
</intent>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="http" />
</intent>
</queries>
dependencies:
animated_text_kit: ^4.2.1
flutter:
sdk: flutter
font_awesome_flutter: ^9.0.0
url_launcher: ^6.0.4
dev_dependencies:
flutter_launcher_icons: ^0.9.0
flutter_native_splash: ^1.1.8+4
flutter_test:
sdk: flutter
lint: ^1.0.0
flutter_icons:
android: "launcher_icon"
ios: true
remove_alpha_ios: true
image_path: "assets/images/logo.png"
adaptive_icon_background: "assets/images/logo.png"
adaptive_icon_foreground: "assets/images/logo.png"
flutter_native_splash:
color: "#FFFFFF"
image: "assets/images/logo.png"
android: true
ios: true
assets:
- assets/images/
- assets/badges/
- assets/projects/
fonts:
- family: FiraCode
fonts:
- asset: assets/fonts/FiraCode/FiraCode-Light.ttf
- asset: assets/fonts/FiraCode/FiraCode-Medium.ttf
- asset: assets/fonts/FiraCode/FiraCode-Regular.ttf
- asset: assets/fonts/FiraCode/FiraCode-SemiBold.ttf
- asset: assets/fonts/FiraCode/FiraCode-Bold.ttf
Pokemon Explorer
$ flutter create pokedex
$ cd pokedex
dev_dependencies:
flutter_launcher_icons: ^0.9.0
flutter_native_splash: ^1.1.8+4
flutter_test:
sdk: flutter
lint: ^1.0.0
flutter_icons:
android: "launcher_icon"
ios: true
remove_alpha_ios: true
image_path: "assets/images/logo.png"
adaptive_icon_background: "assets/images/logo.png"
adaptive_icon_foreground: "assets/images/logo.png"
flutter_native_splash:
color: "#EC4561"
image: "assets/images/logo.png"
android: true
ios: true
include: package:lint/analysis_options.yaml
assets:
- assets/images/
- assets/images/large/
- assets/images/small/
fonts:
- family: Pokemon
fonts:
- asset: assets/fonts/Pokemon-Regular.ttf
Pokemon thumbnails and data provided by: https://github.com/fanzeyi/pokemon.json
Cryptocurrency Tracker
$ flutter create cryptospace
$ cd cryptospace
dependencies:
flutter:
sdk: flutter
dio: ^4.0.0
dev_dependencies:
flutter_launcher_icons: ^0.9.0
flutter_native_splash: ^1.1.8+4
flutter_test:
sdk: flutter
lint: ^1.0.0
flutter_icons:
android: "launcher_icon"
ios: true
remove_alpha_ios: true
image_path: "assets/images/logo.png"
adaptive_icon_background: "assets/images/logo.png"
adaptive_icon_foreground: "assets/images/logo.png"
flutter_native_splash:
color: "#EC4561"
image: "assets/images/logo.png"
android: true
ios: true
include: package:lint/analysis_options.yaml
assets:
- assets/images/
const baseUrl = 'api.coincap.io';
const cryptosPath = '/v2/assets';
const kGreenColor = Color(0xFF21CE99);
const kGreyColor = Color(0xFFA0A2A4);
const kBlackColor = Color(0xFF171A1E);
const kRedColor = Color(0xFFCF6679);
Note-taking made simple
$ flutter create notable
$ cd notable
dependencies:
flutter:
sdk: flutter
hive: ^2.0.4
hive_flutter: ^1.0.0
intl: ^0.17.0
keyboard_dismisser: ^2.0.0
shared_preferences: ^2.0.6
dev_dependencies:
build_runner: ^2.0.4
flutter_launcher_icons: ^0.9.0
flutter_native_splash: ^1.1.8+4
flutter_test:
sdk: flutter
hive_generator: ^1.1.0
lint: ^1.0.0
flutter_icons:
android: "launcher_icon"
ios: true
image_path: "assets/images/logo.png"
adaptive_icon_background: "assets/images/logo.png"
adaptive_icon_foreground: "assets/images/logo.png"
flutter_native_splash:
color: "#181818"
image: "assets/images/logo.png"
android: true
ios: true
include: package:lint/analysis_options.yaml
fonts:
- family: Satisfy
fonts:
- asset: assets/fonts/Satisfy/Satisfy-Regular.ttf
import 'package:flutter/material.dart';
const kYellowColor = Color(0xFFF8B425);
const kRedColor = Color(0xFFCF6679);
const kLightGrey = Color(0xFF212121);
const kDarkGrey = Color(0xFF181818);
Real-time chat built with flutter and firebase
$ flutter create chatly
$ cd chatly
dependencies:
adaptive_dialog: ^1.1.0
cloud_firestore: ^2.4.0
firebase_auth: ^3.0.1
firebase_core: ^1.4.0
flutter:
sdk: flutter
keyboard_dismisser: ^2.0.0
timeago: ^3.1.0
validators: ^3.0.0
dev_dependencies:
flutter_launcher_icons: ^0.9.1
flutter_native_splash: ^1.2.1
flutter_test:
sdk: flutter
lint: ^1.5.3
flutter_icons:
android: "launcher_icon"
ios: true
remove_alpha_ios: true
image_path: "assets/images/logo.png"
adaptive_icon_background: "assets/images/logo.png"
adaptive_icon_foreground: "assets/images/logo.png"
flutter_native_splash:
color: "#CD84F1"
image: "assets/images/logo.png"
android: true
ios: true
fonts:
- family: VT323
fonts:
- asset: assets/fonts/VT323-Regular.ttf
import 'package:flutter/material.dart';
const kPurpleColor = Color(0xFFCD84F1);
const kDarkGrey = Color(0xFF181818);
const kLightGrey = Color(0xFF212121);
<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-firestore.js"></script>
include: package:lint/analysis_options.yaml