Cross-Platform Development with Flutter Course

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

Personal Portfolio

Web Demo
Slides and Assets

url_launcher configuration

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

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

Configuring assets

  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

Pokedex

Pokemon Explorer

Web Demo
Slides and Assets

Create new project

$ flutter create pokedex
$ cd pokedex

Add the necessary dependencies and configure launcher icon and splash screen

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

Create the file `analysis_options.yaml` in the root directory and add the following line

include: package:lint/analysis_options.yaml

Add asset and font directories to `pubspec.yaml`

  assets:
    - assets/images/
    - assets/images/large/
    - assets/images/small/

  fonts:
    - family: Pokemon
      fonts:
        - asset: assets/fonts/Pokemon-Regular.ttf

Credits

Pokemon thumbnails and data provided by: https://github.com/fanzeyi/pokemon.json

Cryptospace

Cryptocurrency Tracker

Web Demo
Slides and Assets

API

coincap.io

Create new project

$ flutter create cryptospace
$ cd cryptospace

Add the necessary dependencies and configure launcher icon and splash screen

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

Create the file `analysis_options.yaml` in the root directory and add the following line

include: package:lint/analysis_options.yaml

Add asset and font directories to `pubspec.yaml`

  assets:
    - assets/images/

Constants

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);

Notable

Note-taking made simple

Web Demo
Slides and Assets

Create new project

$ flutter create notable
$ cd notable

Add the necessary dependencies and configure launcher icon and splash screen

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

Create the file `analysis_options.yaml` in the root directory and add the following line

include: package:lint/analysis_options.yaml

Add asset and font directories to `pubspec.yaml`

  fonts:
    - family: Satisfy
      fonts:
        - asset: assets/fonts/Satisfy/Satisfy-Regular.ttf

Add constants `constants.dart`

import 'package:flutter/material.dart';

const kYellowColor = Color(0xFFF8B425);
const kRedColor = Color(0xFFCF6679);
const kLightGrey = Color(0xFF212121);
const kDarkGrey = Color(0xFF181818);

Chatly

Real-time chat built with flutter and firebase

Web Demo
Slides and assets

Create new project

$ flutter create chatly
$ cd chatly

Dependencies

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

Configuring font

  fonts:
    - family: VT323
      fonts:
        - asset: assets/fonts/VT323-Regular.ttf

Constants

import 'package:flutter/material.dart';

const kPurpleColor = Color(0xFFCD84F1);
const kDarkGrey = Color(0xFF181818);
const kLightGrey = Color(0xFF212121);

Firebase web dependencies

<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>

Create the file `analysis_options.yaml` in the root directory and add the following line

include: package:lint/analysis_options.yaml

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Cross-Platform Development with Flutter Course

Personal Portfolio

url_launcher configuration

Dependencies

Configuring assets

Pokedex

Create new project

Add the necessary dependencies and configure launcher icon and splash screen

Create the file `analysis_options.yaml` in the root directory and add the following line

Add asset and font directories to `pubspec.yaml`

Credits

Cryptospace

API

Create new project

Add the necessary dependencies and configure launcher icon and splash screen

Create the file `analysis_options.yaml` in the root directory and add the following line

Add asset and font directories to `pubspec.yaml`

Constants

Notable

Create new project

Add the necessary dependencies and configure launcher icon and splash screen

Create the file `analysis_options.yaml` in the root directory and add the following line

Add asset and font directories to `pubspec.yaml`

Add constants `constants.dart`

Chatly

Create new project

Dependencies

Configuring font

Constants

Firebase web dependencies

Create the file `analysis_options.yaml` in the root directory and add the following line

About

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 32 Commits
chatly		chatly
cryptospace		cryptospace
notable		notable
pokedex		pokedex
portfolio		portfolio
README.md		README.md

mibrah42/Cross-Platform-Development-with-Flutter-Course

Folders and files

Latest commit

History

Repository files navigation

Cross-Platform Development with Flutter Course

Personal Portfolio

url_launcher configuration

Dependencies

Configuring assets

Pokedex

Create new project

Add the necessary dependencies and configure launcher icon and splash screen

Create the file analysis_options.yaml in the root directory and add the following line

Add asset and font directories to pubspec.yaml

Credits

Cryptospace

API

Create new project

Add the necessary dependencies and configure launcher icon and splash screen

Create the file analysis_options.yaml in the root directory and add the following line

Add asset and font directories to pubspec.yaml

Constants

Notable

Create new project

Add the necessary dependencies and configure launcher icon and splash screen

Create the file analysis_options.yaml in the root directory and add the following line

Add asset and font directories to pubspec.yaml

Add constants constants.dart

Chatly

Create new project

Dependencies

Configuring font

Constants

Firebase web dependencies

Create the file analysis_options.yaml in the root directory and add the following line

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Create the file `analysis_options.yaml` in the root directory and add the following line

Add asset and font directories to `pubspec.yaml`

Create the file `analysis_options.yaml` in the root directory and add the following line

Add asset and font directories to `pubspec.yaml`

Create the file `analysis_options.yaml` in the root directory and add the following line

Add asset and font directories to `pubspec.yaml`

Add constants `constants.dart`

Create the file `analysis_options.yaml` in the root directory and add the following line

Packages