Flutter Development: From Basics to Advanced

Module 1: Introduction to Flutter

Lesson 1: Overview of Flutter

What is Flutter?

Flutter is an open-source framework for creating high-quality, high-performance mobile applications for Android and iOS. It provides a simple, powerful, efficient, and easy-to-understand SDK to write mobile applications in Google's own language, Dart.

Advantages of Flutter

Fast Development
Expressive and Flexible UI
Native Performance

Code Example


import 'package:flutter/material.dart';

// Entry point of the Flutter application
void main() => runApp(MyApp());

// MyApp is a stateless widget that defines the main structure of the app
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Scaffold provides a basic material design layout structure
      home: Scaffold(
        appBar: AppBar(title: Text('Welcome to Flutter')),
        body: Center(child: Text('Hello World')),
      ),
    );
  }
}

Note: This example demonstrates the basic structure of a Flutter application, including the main entry point, a stateless widget, and a simple UI layout using Scaffold, AppBar, and Center widgets.

Advanced Code Example


import 'package:flutter/material.dart';

// Entry point of the Flutter application
void main() => runApp(MyApp());

// MyApp is a stateless widget that defines the main structure of the app
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Stateful Widget Example')),
        body: Center(child: CounterWidget()),
      ),
    );
  }
}

// CounterWidget is a stateful widget that maintains its own state
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

// State class for CounterWidget
class _CounterWidgetState extends State {
  int _counter = 0; // State variable to keep track of the counter

  // Method to increment the counter
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('You have pushed the button this many times:'),
        Text('$_counter', style: Theme.of(context).textTheme.headline4),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

Learning Nugget: Stateful widgets in Flutter allow you to create dynamic and interactive UIs. The setState() method is crucial as it notifies the framework to update the UI when the state changes.

Module 2: Setting Up the Development Environment

Lesson 2: Installation and Setup

This module covers setting up Flutter on your development machine, including installing Flutter on Windows and MacOS, setting up Android Studio, and running the Flutter Doctor.

Code Example


# On Windows:
# Step 1: Download Flutter SDK from the official Flutter website.
# Step 2: Extract the ZIP file to your desired location.
# Step 3: Update your system's PATH environment variable to include the Flutter bin directory.

# Step 4: Run Flutter Doctor to check the installation.
flutter doctor

# On MacOS:
# Step 1: Install Flutter using Homebrew.
brew install --cask flutter

# Step 2: Run Flutter Doctor to check the installation.
flutter doctor

Tip: Ensure that you have installed Android Studio and set up the Android SDK correctly, as Flutter relies on these tools for Android development.

Lesson 3: Git and Version Control

Basic Git Commands


# Initialize a new Git repository
git init

# Clone an existing repository
git clone 

# Check the status of your repository
git status

# Add files to the staging area
git add 

# Commit changes to the repository
git commit -m "Commit message"

# Push changes to a remote repository
git push origin main

# Pull changes from a remote repository
git pull origin main

Branching and Merging


# Create a new branch
git checkout -b 

# Switch to another branch
git checkout 

# Merge a branch into the current branch
git merge 

# Delete a branch
git branch -d

Note: Using branches in Git helps you manage different features or versions of your project simultaneously. Merging allows you to combine the work from different branches into a single branch.

Module 3: Dart Programming Basics

Lesson 4: Introduction to Dart

Sub-lesson 1: Variables and Data Types

Dart is a general-purpose programming language originally developed by Google. It is an object-oriented language with a syntax similar to C. It supports various data types like numbers, strings, booleans, and lists.

Variables and Data Types Examples


void main() {
  // String data type
  String name = 'Dart';
  print('Hello, $name!');

  // Integer data type
  int age = 30;

  // Double data type
  double height = 5.9;

  // Boolean data type
  bool isStudent = false;

  // List data type
  List fruits = ['Apple', 'Banana', 'Cherry'];

  // Map data type
  Map scores = {
    'Math': 90,
    'Science': 85,
    'English': 92
  };

  print('Name: $name, Age: $age, Height: $height, Student: $isStudent');
  print('Fruits: $fruits');
  print('Scores: $scores');
}

Tip: Dart's data types are versatile and can be used to model a wide range of real-world entities. Familiarize yourself with lists and maps, as they are frequently used in Flutter applications.

Learning Nugget: Dart is a strongly typed language, meaning that the type of a variable is known at compile time. This helps catch errors early in the development process.

Sub-lesson 2: Decision Making and Loops

This lesson covers control flow in Dart, including if-else statements and loops like for, while, and do-while.

Decision Making and Loops Examples


void main() {
  int score = 85;

  // If-else statement
  if (score >= 90) {
    print('Grade: A');
  } else if (score >= 80) {
    print('Grade: B');
  } else if (score >= 70) {
    print('Grade: C');
  } else {
    print('Grade: F');
  }

  // Switch-case statement
  String grade = 'B';

  switch (grade) {
    case 'A':
      print('Excellent');
      break;
    case 'B':
      print('Good');
      break;
    case 'C':
      print('Fair');
      break;
    case 'F':
      print('Fail');
      break;
    default:
      print('Invalid grade');
  }
}


void main() {
  // For loop
  for (int i = 0; i < 5; i++) {
    print('For loop iteration: $i');
  }

  // While loop
  int j = 0;
  while (j < 5) {
    print('While loop iteration: $j');
    j++;
  }

  // Do-while loop
  int k = 0;
  do {
    print('Do-while loop iteration: $k');
    k++;
  } while (k < 5);
}

Note: Control flow statements are essential for managing the flow of your program. Use if-else and switch-case for decision making, and loops for repetitive tasks.

Sub-lesson 3: Functions in Dart

Functions are a group of statements that together perform a specific task. Dart functions are easy to define and use.

Functions Examples


// Function with return type
int add(int a, int b) => a + b;

// Function with void return type
void greet(String name) {
  print('Hello, $name!');
}

void main() {
  // Calling functions
  print(add(3, 4)); // Output: 7
  greet('Alice'); // Output: Hello, Alice!
}

Learning Nugget: Dart supports both named and positional parameters in functions. Use named parameters for optional parameters with default values.

Sub-lesson 4: Object-Oriented Programming in Dart

Dart supports object-oriented programming concepts such as classes, interfaces, and inheritance.

OOP Examples


class Animal {
  String name;

  // Constructor
  Animal(this.name);

  // Method
  void speak() {
    print('$name makes a sound');
  }
}

void main() {
  // Creating an instance of the Animal class
  var dog = Animal('Dog');
  dog.speak(); // Output: Dog makes a sound
}


// Base class
class Animal {
  String name;

  Animal(this.name);

  void speak() {
    print('$name makes a sound');
  }
}

// Derived class
class Dog extends Animal {
  Dog(String name) : super(name);

  @override
  void speak() {
    print('$name barks');
  }
}

void main() {
  var dog = Dog('Buddy');
  dog.speak(); // Output: Buddy barks
}

Note: Inheritance allows you to create a new class that reuses, extends, and modifies the behavior defined in another class. Use the @override annotation to indicate that you are overriding a method from the superclass.

Sub-lesson 5: Regular Expressions

Handling regular expressions in Dart.

Regular Expressions Examples


void main() {
  String pattern = r'\d+';
  String input = 'There are 123 numbers in this string.';
  RegExp regExp = RegExp(pattern);
  Iterable matches = regExp.allMatches(input);

  for (var match in matches) {
    print(match.group(0)); // Output: 123
  }
}

Tip: Regular expressions are a powerful tool for pattern matching and text manipulation. Use the RegExp class in Dart to work with regular expressions.

Module 4: Building Your First Flutter App

Lesson 5: Creating a Simple App in Android Studio

Sub-lesson 1: Project Setup

This lesson guides you through setting up your first Flutter project in Android Studio.

Sub-lesson 2: Understanding Project Structure

An overview of the Flutter project structure, including folders and files.

Sub-lesson 3: Writing Your First Flutter Code

Create a simple "Hello World" application in Flutter.

Flutter Code Examples


import 'package:flutter/material.dart';

// Entry point of the Flutter application
void main() => runApp(MyApp());

// MyApp is a stateless widget that defines the main structure of the app
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Scaffold provides a basic material design layout structure
      home: Scaffold(
        appBar: AppBar(title: Text('Hello World App')),
        body: Center(child: Text('Hello World')),
      ),
    );
  }
}


import 'package:flutter/material.dart';

// Entry point of the Flutter application
void main() => runApp(MyApp());

// MyApp is a stateless widget that defines the main structure of the app
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: Counter(),
      ),
    );
  }
}

// Counter is a stateful widget that maintains its own state
class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

// State class for Counter
class _CounterState extends State {
  int _counter = 0; // State variable to keep track of the counter

  // Method to increment the counter
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('You have pushed the button this many times:'),
          Text('$_counter', style: Theme.of(context).textTheme.headline4),
          ElevatedButton(
            onPressed: _incrementCounter,
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

Sub-lesson 4: Running Your App

How to run and debug your Flutter application.

Running the App Example


# Run the Flutter app on a connected device or emulator
flutter run

# Debug the Flutter app
flutter run --debug

# Release build of the Flutter app
flutter run --release

Tip: Use the Flutter Inspector in Android Studio to debug and analyze your Flutter app's UI structure and performance.

Module 5: Flutter Widgets

Lesson 6: Introduction to Widgets

Sub-lesson 1: Stateless and Stateful Widgets

Understanding the difference between stateless and stateful widgets in Flutter.

Stateless and Stateful Widgets Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stateless Widget')),
        body: Center(child: MyStatelessWidget()),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('This is a stateless widget');
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stateful Widget')),
        body: Center(child: MyStatefulWidget()),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State {
  String _message = 'Hello World';

  void _changeMessage() {
    setState(() {
      _message = 'You pressed the button!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(_message),
        ElevatedButton(
          onPressed: _changeMessage,
          child: Text('Press me'),
        ),
      ],
    );
  }
}

Learning Nugget: Use stateless widgets when the UI does not change dynamically. Use stateful widgets when the UI changes based on user interaction or other events.

Sub-lesson 2: Basic Widgets Overview

Exploring basic Flutter widgets like Text, Image, and Icon.

Basic Widgets Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Basic Widgets')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Hello Flutter', style: TextStyle(fontSize: 24)),
              Image.network('https://flutter.dev/images/flutter-logo-sharing.png'),
              Icon(Icons.star, color: Colors.blue, size: 50),
            ],
          ),
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Buttons Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: Text('Elevated Button'),
              ),
              TextButton(
                onPressed: () {},
                child: Text('Text Button'),
              ),
              IconButton(
                icon: Icon(Icons.thumb_up),
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Note: Flutter provides a wide range of built-in widgets to create interactive UIs. Experiment with different widgets to understand their properties and behavior.

Sub-lesson 3: Layout Widgets

Understanding layout widgets in Flutter, including Container, Row, and Column.

Layout Widgets Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Container Example')),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.blue, width: 2),
            ),
            child: Text('Hello Container'),
          ),
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Row and Column Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Icon(Icons.home, size: 50),
                  Icon(Icons.star, size: 50),
                  Icon(Icons.settings, size: 50),
                ],
              ),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Button 1'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Button 2'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Learning Nugget: Use the Row and Column widgets to create flexible and responsive layouts in Flutter. The mainAxisAlignment and crossAxisAlignment properties help you align child widgets within the parent.

Sub-lesson 4: Advanced Layout Widgets

Advanced layout techniques in Flutter.

Advanced Layout Widgets Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack and Positioned Example')),
        body: Center(
          child: Stack(
            children: [
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
              Positioned(
                left: 50,
                top: 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flexible and Expanded Example')),
        body: Column(
          children: [
            Flexible(
              child: Container(
                color: Colors.red,
                child: Center(child: Text('Flexible 1')),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.green,
                child: Center(child: Text('Flexible 2')),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
                child: Center(child: Text('Expanded')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Note: The Stack widget allows you to overlay widgets on top of each other. The Positioned widget lets you position its child widget within the stack. Flexible and Expanded widgets help create flexible layouts by resizing their children within a Row or Column.

Module 6: Application Architecture

Lesson 7: Understanding Flutter Architecture

Sub-lesson 1: Widget Tree

An in-depth look at the widget tree in Flutter.

Widget Tree Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Widget Tree Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Level 1'),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Level 2'),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text('Level 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Tip: The widget tree in Flutter represents the hierarchical structure of widgets in your application. Understanding the widget tree is crucial for building complex UIs.

Sub-lesson 2: State Management

Managing state in a Flutter application.

State Management Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('State Management Example')),
        body: Counter(),
      ),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('You have pushed the button this many times:'),
          Text('$_counter', style: Theme.of(context).textTheme.headline4),
          ElevatedButton(
            onPressed: _incrementCounter,
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterProvider(
        child: Scaffold(
          appBar: AppBar(title: Text('InheritedWidget Example')),
          body: Counter(),
        ),
      ),
    );
  }
}

class CounterProvider extends InheritedWidget {
  final int counter;
  final Widget child;

  CounterProvider({this.counter = 0, this.child}) : super(child: child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return true;
  }

  static CounterProvider of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType();
  }
}

class Counter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterProvider = CounterProvider.of(context);
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('You have pushed the button this many times:'),
          Text('${counterProvider.counter}', style: Theme.of(context).textTheme.headline4),
          ElevatedButton(
            onPressed: () {},
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

Note: InheritedWidget is a powerful way to pass data down the widget tree. It allows widgets to access shared data efficiently without passing the data through constructors.

Sub-lesson 3: Gesture Detection

Working with gestures in Flutter.

Gesture Detection Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Gesture Detection Example')),
        body: GestureDetectorExample(),
      ),
    );
  }
}

class GestureDetectorExample extends StatefulWidget {
  @override
  _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State {
  String _message = 'Tap the box';

  void _changeMessage() {
    setState(() {
      _message = 'Box tapped!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: _changeMessage,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
          child: Center(child: Text(_message, style: TextStyle(color: Colors.white))),
        ),
      ),
    );
  }
}

Learning Nugget: The GestureDetector widget in Flutter detects various gestures such as taps, double-taps, long presses, and swipes. Use GestureDetector to add interactivity to your widgets.

Module 7: Intermediate Flutter Concepts

Lesson 8: State Management with Riverpod

Sub-lesson 1: Introduction to Riverpod

Getting started with Riverpod for state management in Flutter.

Riverpod Examples


import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateProvider((ref) => 0);

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Example')),
        body: Center(child: Counter()),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read(counterProvider).state++,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class Counter extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final count = watch(counterProvider).state;
    return Text('$count');
  }
}


import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class Counter extends StateNotifier {
  Counter() : super(0);

  void increment() => state++;
}

final counterProvider = StateNotifierProvider((ref) => Counter());

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod StateNotifier Example')),
        body: Center(child: CounterWidget()),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read(counterProvider).increment(),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final count = watch(counterProvider.state);
    return Text('$count');
  }
}

Learning Nugget: Riverpod is a powerful state management solution for Flutter that overcomes the limitations of Provider. It provides a robust and scalable way to manage state in your applications.

Sub-lesson 2: Implementing Riverpod in a Flutter App

Using Riverpod for state management in a Flutter application.

Implementing Riverpod Examples


import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final messageProvider = StateProvider((ref) => 'Hello Riverpod');

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Example')),
        body: Center(child: MessageWidget()),
      ),
    );
  }
}

class MessageWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final message = watch(messageProvider).state;
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(message),
        ElevatedButton(
          onPressed: () => context.read(messageProvider).state = 'Hello from Riverpod',
          child: Text('Change Message'),
        ),
      ],
    );
  }
}

Note: Riverpod's ConsumerWidget and ScopedReader make it easy to access and update state in your Flutter applications. Use these components to build responsive and interactive UIs.

Lesson 9: Navigation and Routing

Sub-lesson 1: Basic Navigation

Implementing basic navigation in Flutter.

Basic Navigation Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back to Home Screen'),
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second', arguments: 'Hello from Home Screen');
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(child: Text(args)),
    );
  }
}

Tip: Use named routes to navigate between different screens in your Flutter app. This approach makes your code more readable and maintainable.

Sub-lesson 2: Passing Data between Screens

How to pass data between screens in Flutter.

Passing Data Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen(data: 'Hello from Home Screen')),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final String data;
  SecondScreen({this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(child: Text(data)),
    );
  }
}

Learning Nugget: Passing data between screens in Flutter can be done using constructors, Navigator arguments, or state management solutions like Riverpod or Provider.

Lesson 10: Animation in Flutter

Sub-lesson 1: Basics of Animation

Introduction to animations in Flutter.

Basic Animation Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Basic Animation')),
        body: AnimationExample(),
      ),
    );
  }
}

class AnimationExample extends StatefulWidget {
  @override
  _AnimationExampleState createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ScaleTransition(
        scale: _animation,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AnimatedContainer Example')),
        body: AnimatedContainerExample(),
      ),
    );
  }
}

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State {
  bool _isExpanded = false;

  void _toggleContainer() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedContainer(
            width: _isExpanded ? 200 : 100,
            height: _isExpanded ? 200 : 100,
            color: _isExpanded ? Colors.blue : Colors.red,
            duration: Duration(seconds: 1),
            curve: Curves.easeInOut,
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _toggleContainer,
            child: Text('Toggle Container'),
          ),
        ],
      ),
    );
  }
}

Tip: Use AnimatedContainer for simple animations that involve changing the size, color, or alignment of a container. It provides a convenient way to create basic animations without the need for an AnimationController.

Sub-lesson 2: Advanced Animation Techniques

Advanced animation techniques in Flutter.

Advanced Animation Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Advanced Animation')),
        body: AdvancedAnimationExample(),
      ),
    );
  }
}

class AdvancedAnimationExample extends StatefulWidget {
  @override
  _AdvancedAnimationExampleState createState() => _AdvancedAnimationExampleState();
}

class _AdvancedAnimationExampleState extends State with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = Tween(
      begin: Offset(0, 0),
      end: Offset(1.5, 0),
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _animation,
      child: Center(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (_) => SecondScreen()));
          },
          child: Hero(
            tag: 'hero-image',
            child: Image.network('https://flutter.dev/images/flutter-logo-sharing.png', width: 100, height: 100),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-image',
          child: Image.network('https://flutter.dev/images/flutter-logo-sharing.png', width: 300, height: 300),
        ),
      ),
    );
  }
}

Note: Hero animations provide a seamless transition between screens by animating a shared widget. Use the Hero widget and a common tag to create hero animations in your Flutter app.

Module 8: Flutter for Advanced Users

Lesson 11: Building Complex Layouts

Sub-lesson 1: Using Custom Widgets

Creating custom widgets in Flutter.

Custom Widgets Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Widgets')),
        body: Center(child: CustomButton()),
      ),
    );
  }
}

class CustomButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('Button Pressed'),
        ));
      },
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text('Custom Button', style: TextStyle(color: Colors.white)),
      ),
    );
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Card Widget')),
        body: Center(child: CustomCard(title: 'Flutter Card', content: 'This is a custom card widget.')),
      ),
    );
  }
}

class CustomCard extends StatelessWidget {
  final String title;
  final String content;

  CustomCard({this.title, this.content});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(16),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(title, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            SizedBox(height: 8),
            Text(content),
          ],
        ),
      ),
    );
  }
}

Learning Nugget: Creating custom widgets in Flutter allows you to encapsulate reusable UI components. This promotes code reuse and makes your codebase more maintainable.

Sub-lesson 2: Advanced Layout Techniques

Advanced layout techniques in Flutter.

Advanced Layout Techniques Examples


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GridView Example')),
        body: GridView.count(
          crossAxisCount: 2,
          children: List.generate(20, (index) {
            return Center(
              child: Container(
                padding: EdgeInsets.all(8),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blue),
                ),
                child: Text('Item $index'),
              ),
            );
          }),
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView.builder Example')),
        body: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
              leading: Icon(Icons.list),
            );
          },
        ),
      ),
    );
  }
}

Note: GridView and ListView.builder are powerful widgets for creating scrollable lists and grids in Flutter. Use these widgets to build dynamic and responsive layouts.

Lesson 12: Accessing APIs

Sub-lesson 1: REST API Integration

Integrating REST APIs in Flutter.

REST API Integration Examples


import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('API Integration')),
        body: Center(child: FetchData()),
      ),
    );
  }
}

class FetchData extends StatefulWidget {
  @override
  _FetchDataState createState() => _FetchDataState();
}

class _FetchDataState extends State {
  Future fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
    if (response.statusCode == 200) {
      return json.decode(response.body)['title'];
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: fetchData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return Text('Title: ${snapshot.data}');
        }
      },
    );
  }
}


import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('POST Request Example')),
        body: Center(child: PostData()),
      ),
    );
  }
}

class PostData extends StatefulWidget {
  @override
  _PostDataState createState() => _PostDataState();
}

class _PostDataState extends State {
  Future postData() async {
    final response = await http.post(
      Uri.parse('https://jsonplaceholder.typicode.com/posts'),
      headers: {'Content-Type': 'application/json; charset=UTF-8'},
      body: json.encode({
        'title': 'foo',
        'body': 'bar',
        'userId': 1,
      }),
    );
    if (response.statusCode == 201) {
      return json.decode(response.body)['title'];
    } else {
      throw Exception('Failed to post data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: postData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return Text('Title: ${snapshot.data}');
        }
      },
    );
  }
}

Learning Nugget: Use the http package to make HTTP requests in your Flutter app. This package supports various HTTP methods, including GET, POST, PUT, and DELETE.

Sub-lesson 2: Handling JSON Data

Working with JSON data in Flutter.

JSON Data Handling Examples


import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('JSON Data')),
        body: Center(child: FetchJsonData()),
      ),
    );
  }
}

class FetchJsonData extends StatefulWidget {
  @override
  _FetchJsonDataState createState() => _FetchJsonDataState();
}

class _FetchJsonDataState extends State {
  Future> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder>(
      future: fetchData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Title: ${snapshot.data['title']}'),
              Text('Body: ${snapshot.data['body']}'),
            ],
          );
        }
      },
    );
  }
}


import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Complex JSON Parsing')),
        body: Center(child: FetchComplexJsonData()),
      ),
    );
  }
}

class FetchComplexJsonData extends StatefulWidget {
  @override
  _FetchComplexJsonDataState createState() => _FetchComplexJsonDataState();
}

class _FetchComplexJsonDataState extends State {
  Future> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    if (response.statusCode == 200) {
      List jsonResponse = json.decode(response.body);
      return jsonResponse.map((post) => Post.fromJson(post)).toList();
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder>(
      future: fetchData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(snapshot.data[index].title),
                subtitle: Text(snapshot.data[index].body),
              );
            },
          );
        }
      },
    );
  }
}

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({this.userId, this.id, this.title, this.body});

  factory Post.fromJson(Map json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

Tip: Use the Dart json package to parse JSON data. For complex JSON structures, create model classes with factory constructors to handle the parsing efficiently.

Lesson 13: Database Integration

Sub-lesson 1: Using SQLite

Integrating SQLite database in Flutter.

SQLite Integration Examples


import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DatabaseExample(),
    );
  }
}

class DatabaseExample extends StatefulWidget {
  @override
  _DatabaseExampleState createState() => _DatabaseExampleState();
}

class _DatabaseExampleState extends State {
  Database database;

  Future openDatabase() async {
    database = await openDatabase(
      join(await getDatabasesPath(), 'example.db'),
      onCreate: (db, version) {
        return db.execute(
          "CREATE TABLE items(id INTEGER PRIMARY KEY, name TEXT)",
        );
      },
      version: 1,
    );
  }

  Future insertItem(String name) async {
    await database.insert(
      'items',
      {'name': name},
      conflictAlgorithm: ConflictAlgorithm.replace,
    );
  }

  Future>> fetchItems() async {
    final List> maps = await database.query('items');
    return maps;
  }

  @override
  void initState() {
    super.initState();
    openDatabase();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SQLite Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                await insertItem('New Item');
                setState(() {});
              },
              child: Text('Insert Item'),
            ),
            FutureBuilder>>(
              future: fetchItems(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return CircularProgressIndicator();
                } else if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  return ListView.builder(
                    shrinkWrap: true,
                    itemCount: snapshot.data.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(snapshot.data[index]['name']),
                      );
                    },
                  );
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

Learning Nugget: The sqflite package provides a robust and efficient way to work with SQLite databases in Flutter. Use this package to perform CRUD operations on your local database.

Sub-lesson 2: Using Firebase

Integrating Firebase database in Flutter.

Firebase Integration Examples


import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirebaseExample(),
    );
  }
}

class FirebaseExample extends StatelessWidget {
  final CollectionReference collectionReference =
      FirebaseFirestore.instance.collection('items');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                collectionReference.add({'name': 'New Item'});
              },
              child: Text('Add Item'),
            ),
            StreamBuilder(
              stream: collectionReference.snapshots(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return CircularProgressIndicator();
                } else if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  return ListView.builder(
                    shrinkWrap: true,
                    itemCount: snapshot.data.docs.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(snapshot.data.docs[index]['name']),
                      );
                    },
                  );
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

Tip: Firebase provides a real-time database and cloud storage. The cloud_firestore package makes it easy to interact with Firestore from your Flutter app.

Lesson 14: Security in Flutter

Sub-lesson 1: Secure Storage

Using secure storage in Flutter.

Secure Storage Examples


import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SecureStorageExample(),
    );
  }
}

class SecureStorageExample extends StatelessWidget {
  final FlutterSecureStorage storage = FlutterSecureStorage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Secure Storage Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                await storage.write(key: 'username', value: 'admin');
              },
              child: Text('Save Data'),
            ),
            ElevatedButton(
              onPressed: () async {
                String username = await storage.read(key: 'username');
                print('Username: $username');
              },
              child: Text('Read Data'),
            ),
          ],
        ),
      ),
    );
  }
}

Learning Nugget: The flutter_secure_storage package allows you to store sensitive data securely. Use it to store credentials, tokens, and other confidential information.

Sub-lesson 2: Encryption

Using encryption in Flutter.

Encryption Examples


import 'package:flutter/material.dart';
import 'package:encrypt/encrypt.dart' as encrypt;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: EncryptionExample(),
    );
  }
}

class EncryptionExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Encryption Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                final key = encrypt.Key.fromLength(32);
                final iv = encrypt.IV.fromLength(16);
                final encrypter = encrypt.Encrypter(encrypt.AES(key));

                final encrypted = encrypter.encrypt('Hello Flutter', iv: iv);
                final decrypted = encrypter.decrypt(encrypted, iv: iv);

                print('Encrypted: ${encrypted.base64}');
                print('Decrypted: $decrypted');
              },
              child: Text('Encrypt/Decrypt'),
            ),
          ],
        ),
      ),
    );
  }
}

Note: The encrypt package provides various encryption algorithms such as AES and RSA. Use this package to encrypt and decrypt sensitive data in your Flutter app.

Lesson 15: Google Maps Integration

Sub-lesson 1: Displaying Google Maps

Integrating Google Maps in Flutter.

Google Maps Examples


import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GoogleMapsExample(),
    );
  }
}

class GoogleMapsExample extends StatefulWidget {
  @override
  _GoogleMapsExampleState createState() => _GoogleMapsExampleState();
}

class _GoogleMapsExampleState extends State {
  GoogleMapController mapController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Google Maps Example')),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GoogleMapsMarkersExample(),
    );
  }
}

class GoogleMapsMarkersExample extends StatefulWidget {
  @override
  _GoogleMapsMarkersExampleState createState() => _GoogleMapsMarkersExampleState();
}

class _GoogleMapsMarkersExampleState extends State {
  GoogleMapController mapController;
  final Set _markers = {};

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    _markers.add(
      Marker(
        markerId: MarkerId('id-1'),
        position: _center,
        infoWindow: InfoWindow(title: 'My Location'),
      ),
    );
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Google Maps Markers Example')),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        markers: _markers,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}

Learning Nugget: The google_maps_flutter package provides a rich set of features for integrating Google Maps into your Flutter app. Use markers, polylines, and other map elements to create interactive maps.

Module 9: Test-Driven Development (TDD) and Clean Code

Lesson 16: Testing Flutter Applications

Sub-lesson 1: Unit Testing

Writing unit tests in Flutter.

Unit Testing Examples


import 'package:flutter_test/flutter_test.dart';

int add(int a, int b) {
  return a + b;
}

void main() {
  test('adds one to input values', () {
    expect(add(1, 2), 3);
    expect(add(-7, -3), -10);
    expect(add(0, 0), 0);
  });
}

Tip: Use the flutter_test package to write unit tests for your Flutter app. This package provides various utilities for testing your code.

Sub-lesson 2: Widget Testing

Writing widget tests in Flutter.

Widget Testing Examples


import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';
import 'package:myapp/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());

    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

Note: Widget tests help you verify the behavior and appearance of your widgets. Use the WidgetTester class to interact with and test your widgets.

Sub-lesson 3: Integration Testing

Writing integration tests in Flutter.

Integration Testing Examples


import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';
import 'package:myapp/main.dart';

void main() {
  testWidgets('End-to-end test', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());

    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Learning Nugget: Integration tests verify the entire application flow and interactions between widgets. Use integration tests to catch issues that may not be apparent in unit or widget tests.

Lesson 17: Clean Code Principles

Sub-lesson 1: Writing Clean Code in Flutter

Best practices for clean code in Flutter.

Clean Code Examples


class Calculator {
  int add(int a, int b) {
    return a + b;
  }

  int subtract(int a, int b) {
    return a - b;
  }
}

void main() {
  var calculator = Calculator();
  print('Sum: ${calculator.add(3, 2)}');
  print('Difference: ${calculator.subtract(5, 2)}');
}

Tip: Follow clean code principles such as meaningful names, small functions, and single responsibility to make your code more readable and maintainable.

Sub-lesson 2: Refactoring Techniques

Refactoring your Flutter code.

Refactoring Examples


// Before refactoring
void main() {
  print('Hello, world!');
}

// After refactoring
void main() {
  greet();
}

void greet() {
  print('Hello, world!');
}

Learning Nugget: Refactoring improves the structure and readability of your code without changing its functionality. Regularly refactor your code to maintain a high-quality codebase.

Module 10: Deployment

Lesson 18: Deploying Flutter Apps

Sub-lesson 1: Preparing for Release

Preparing your Flutter app for release.

Release Preparation Examples


# Run Flutter build commands to generate release builds for different platforms
# Build a release APK for Android
flutter build apk --release

# Build a release AAB for Android
flutter build appbundle --release

# Build a release IPA for iOS
flutter build ios --release

# Build a release EXE for Windows
flutter build windows --release

# Build a release DMG for MacOS
flutter build macos --release

# Build a release package for Linux
flutter build linux --release

Tip: Use the flutter build commands to generate release builds for different platforms. Ensure that you follow platform-specific guidelines and requirements for publishing your app.

Sub-lesson 2: Publishing to Play Store

Publishing your Flutter app to the Play Store.

Publishing to Play Store Examples


# Generate a signed APK
flutter build apk --release

# Locate the APK
open build/app/outputs/flutter-apk/app-release.apk

# Follow the steps to create a new application on the Google Play Console and upload your APK
# Complete the store listing, content rating, and pricing & distribution sections
# Submit your app for review

Learning Nugget: Follow the guidelines provided by the Google Play Console for preparing and publishing your app. Ensure that your app complies with all policies and requirements.

Sub-lesson 3: Publishing to App Store

Publishing your Flutter app to the App Store.

Publishing to App Store Examples


# Generate an iOS archive
flutter build ios --release

# Open Xcode and create an archive
open ios/Runner.xcworkspace

# Follow the steps to create a new application on App Store Connect and upload your IPA
# Complete the app information, pricing, and submission sections
# Submit your app for review

Note: The App Store review process is more stringent compared to the Play Store. Ensure that your app adheres to all App Store guidelines and policies.

Sub-lesson 4: Building for Windows

Building a Windows executable (EXE) for your Flutter app.

Building for Windows Examples


# Enable Windows desktop support
flutter config --enable-windows-desktop

# Build a Windows executable
flutter build windows --release

# Locate the EXE
open build/windows/runner/Release

Tip: Ensure that you have the necessary development environment set up for building Windows applications. Use the Windows runner to build and test your app.

Sub-lesson 5: Building for MacOS

Building a MacOS application (DMG) for your Flutter app.

Building for MacOS Examples


# Enable MacOS desktop support
flutter config --enable-macos-desktop

# Build a MacOS application
flutter build macos --release

# Locate the DMG
open build/macos/Build/Products/Release

Learning Nugget: Use the MacOS runner to build and test your Flutter applications on MacOS. Ensure that your app complies with Apple's guidelines for desktop applications.

Sub-lesson 6: Building for Linux

Building a Linux executable for your Flutter app.

Building for Linux Examples


# Enable Linux desktop support
flutter config --enable-linux-desktop

# Build a Linux executable
flutter build linux --release

# Locate the executable
open build/linux/x64/release/bundle

Note: The Flutter Linux runner allows you to build and test your Flutter applications on Linux. Ensure that you have the necessary development environment set up for building Linux applications.