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

Front-end of multiplayer web3 games implemented with Flutter to run on all platforms (Web, Android, iOS, Linux, Window, macOS, TV-OS)

Nov 15, 2022

Learn to build apps that work on Android, iOS, Web, and Desktop

Related tags

Overview

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

You might also like...

Owner

Mohamed Ibrahim

Hybrid App build on flutter SDK able to run on Android, IOS, web, desktop

A Flutter package that makes it easy to customize and work with your Flutter desktop app's system tray.

A Flutter package that makes it easy to customize and work with your Flutter desktop app window.

App to learn how to code with a lot of great courses and ideas of projects to do, focused on productivity and fast learn. 💻

An admin panel aplication written with Flutter, aiming work with apps responsiveness.

Flutter Web application having splash screen and providing Web view Using web view packege.

Flutter basic desktop project. Desktop todo app.

This plugin allows Flutter desktop apps to resizing and repositioning the window.

This plugin allows Flutter desktop apps to defines system/inapp wide hotkey (i.e. shortcut).

Flutter UI Kits for mobile, tablet, desktop and web application

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