Master Google Flutter and Dart — Build Beautiful, High-Performance Cross-Platform Apps for Mobile, Web, and Desktop

Course Description

This comprehensive, project-driven course takes you from absolute beginner to professional Flutter developer. You will learn Dart from the ground up, master the Flutter framework, design responsive and adaptive user interfaces, manage state professionally, integrate APIs and databases, implement authentication and security, optimize performance, write tests, apply clean architecture, and deploy production-ready applications to Android, iOS, Web, Windows, macOS, and Linux.

Every concept is taught with clear explanations, modern syntax, complete working code examples, common mistakes, best practices, exercises, and mini-projects. By the end of the course you will be able to independently design, develop, test, secure, optimize, and ship professional cross-platform applications.

Target Audience

• Absolute beginners with little or no prior mobile development experience
• Web developers who want to expand into mobile
• Students and career switchers aiming for Flutter developer roles
• Developers who know other languages and want to master Flutter professionally

Prerequisites

• Basic computer literacy
• Familiarity with any programming language is helpful but not required
• Willingness to practice daily and complete projects

Learning Objectives

By the end of this course you will be able to:

• Write clean, modern Dart code with null safety, async/await, streams, and advanced language features
• Build complex, responsive, and adaptive UIs using Flutter widgets
• Implement professional navigation, forms, and user input
• Choose and apply the right state-management solution (setState, Provider, Riverpod, BLoC)
• Consume REST APIs, handle authentication, and manage offline data
• Integrate Firebase services
• Apply Clean Architecture and SOLID principles
• Write unit, widget, and integration tests
• Optimize performance and diagnose issues with Flutter DevTools
• Deploy apps to Google Play, App Store, and the web
• Use modern tooling, CI/CD, and AI-assisted development

Estimated Learning Time

• Full-time intensive: 10–12 weeks
• Part-time (10–15 hours/week): 4–6 months
• Total guided content + practice: approximately 180–220 hours

Recommended Development Environment

• Visual Studio Code or Android Studio / IntelliJ IDEA
• Flutter SDK (stable channel)
• Dart SDK (bundled with Flutter)
• Android Emulator and/or physical Android device
• Xcode (macOS only) for iOS development

Required Hardware / Software

• Computer running Windows 10/11, macOS 12+, or Linux (Ubuntu 20.04+ recommended)
• At least 8 GB RAM (16 GB recommended)
• 20+ GB free disk space
• Stable internet connection for package downloads and API testing

Career Opportunities After Completing the Course

• Flutter Mobile Developer
• Cross-Platform Mobile Engineer
• Junior to Mid-level Flutter Developer
• Freelance Flutter Developer
• Mobile App Architect (with continued experience)
• Full-stack roles that include Flutter frontends

Course Structure Overview

• Level 1 — Introduction to Mobile Development and Flutter
• Level 2 — Installing and Configuring Flutter
• Level 3 — Dart Programming From Scratch
• Level 4 — Your First Flutter Application
• Level 5 — Flutter Widgets
• Level 6 — UI and Responsive Design
• Level 7 — Navigation and Routing
• Level 8 — User Input and Forms
• Level 9 — State Management
• Level 10 — Working With APIs
• Level 11 — Local Storage and Databases
• Level 12 — Firebase With Flutter
• Level 13 — Authentication and Security
• Level 14 — Advanced Flutter
• Level 15 — Flutter Architecture
• Level 16 — Testing
• Level 17 — Performance Optimization
• Level 18 — Packages and Plugins
• Level 19 — Device Features
• Level 20 — Flutter Web and Desktop
• Level 21 — App Deployment
• Level 22 — CI/CD
• Level 23 — AI + Flutter Development
• Level 24 — Professional Projects
• Level 25 — Flutter Best Practices
• Level 26 — Common Flutter Mistakes
• Level 27 — Flutter Developer Roadmap
• Level 28 — Exercises and Assessments
• Level 29 — Final Professional Certification Test

LEVEL 1 — Introduction to Mobile Development and Flutter

Lesson 1.1 — What Is Mobile Application Development?

Learning Objectives

• Understand what mobile application development is
• Distinguish between native and cross-platform approaches
• Recognize the main platforms (Android and iOS)

Why It Is Important

Almost every modern business needs a mobile presence. Understanding the landscape helps you choose the right technology and set realistic expectations.

Detailed Explanation

Mobile application development is the process of creating software that runs on smartphones and tablets. The two dominant platforms are Google’s Android and Apple’s iOS.

Android vs iOS

• Android is open-source, runs on a wide variety of devices, and uses Java or Kotlin as primary languages.
• iOS is closed-source, runs only on Apple devices, and primarily uses Swift (or Objective-C).

Native vs Cross-Platform

• Native development means writing separate codebases for Android and iOS. This usually gives the best performance and deepest platform integration but doubles development and maintenance cost.
• Cross-platform frameworks allow you to write most of the code once and run it on multiple platforms.

Flutter’s Position

Flutter is a cross-platform UI toolkit created by Google. It uses the Dart language and compiles to native machine code, delivering near-native performance while allowing a single codebase for Android, iOS, web, Windows, macOS, and Linux.

When Flutter Is the Best Choice

• You need to ship on multiple platforms quickly
• You want a single team and single codebase
• You value highly customizable, beautiful UIs
• Performance is important but you do not need deep platform-specific features that would force heavy platform channels

Common Mistakes

• Assuming Flutter is only for mobile (it also targets web and desktop)
• Choosing Flutter when the app requires extensive use of very new or obscure platform APIs without evaluating plugin availability

Best Practices

• Always evaluate the specific requirements of the project before choosing a technology
• Prototype critical features early

Practice Exercise

Write a short paragraph comparing the advantages of native development versus Flutter for a simple e-commerce application.

Mini Project

Research three real apps built with Flutter and note which platforms they support.

Lesson 1.2 — Flutter Architecture and Core Concepts

Learning Objectives

• Understand Flutter’s layered architecture
• Learn the roles of the Flutter Engine, Framework, and Embedder
• Grasp the concept of widgets and the widget tree

Detailed Explanation

Flutter has a layered architecture:

• Framework (Dart) — The high-level UI library written in Dart. This is what you interact with daily (Material, Cupertino, widgets, gestures, animation, etc.).
• Engine (C++) — Responsible for low-level rendering (Skia or Impeller), text layout, file I/O, and platform channels.
• Embedder — Platform-specific code that hosts the Flutter engine on Android, iOS, Windows, etc.

Widgets

In Flutter everything is a widget. A widget is an immutable description of part of the user interface. Widgets form a tree. When the state of the application changes, Flutter rebuilds the affected parts of the widget tree efficiently.

Hot Reload and Hot Restart

• Hot Reload injects updated code into the running Dart Virtual Machine while preserving the current application state. It is extremely fast and ideal for UI iteration.
• Hot Restart restarts the Dart VM and loses application state. Use it when you change main() or global variables.

Rendering System

Flutter draws every pixel itself using its own rendering engine. It does not rely on OEM widgets. This is why Flutter UIs look consistent across platforms and why customization is powerful.

Advantages of Flutter

• Single codebase for six platforms
• Excellent performance (AOT compilation)
• Highly expressive and flexible UI
• Fast development cycle (Hot Reload)
• Growing ecosystem and strong Google backing

Limitations

• App size can be larger than pure native apps
• Some platform-specific features still require platform channels or plugins
• Web support, while production-ready, still has differences from mobile

Flutter Compared With Other Technologies

Practice Exercise

Explain in your own words why Flutter’s “everything is a widget” philosophy simplifies UI development.

LEVEL 2 — Installing and Configuring Flutter

Lesson 2.1 — Installing Flutter on Windows, macOS, and Linux

Learning Objectives

• Install the Flutter SDK correctly on your operating system
• Configure the PATH environment variable
• Verify the installation with Flutter Doctor

Detailed Installation Steps (Conceptual)

Windows

1. Download the latest stable Flutter SDK zip.
2. Extract it to a location without spaces or special characters (example: C:\src\flutter).
3. Add the flutter\bin folder to your system PATH.
4. Open a new command prompt and run flutter doctor.

macOS

1. Download the SDK.
2. Extract it (commonly to ~/development/flutter).
3. Add the bin directory to your shell profile (.zshrc or .bash_profile).
4. Run flutter doctor.

Linux

1. Download and extract the SDK.
2. Add the bin path to ~/.bashrc or ~/.zshrc.
3. Install required system dependencies listed by flutter doctor.

Essential Commands and Their Meaning

flutter doctor

Checks your environment and reports missing dependencies (Android toolchain, Xcode, VS Code extensions, etc.).

flutter --version

Shows the currently installed Flutter and Dart versions.

flutter create my_app

Creates a new Flutter project with the standard folder structure.

flutter run

Builds and runs the application on a connected device or emulator.

Android Studio / VS Code Setup

• Install Android Studio and the Android SDK.
• Create at least one virtual device (emulator).
• In VS Code, install the official Flutter and Dart extensions.
• On macOS, install Xcode from the App Store and run sudo xcode-select --switch /Applications/Xcode.app.

Common Installation Problems and Solutions

• “cmdline-tools component is missing” → Install Android SDK Command-line Tools via Android Studio SDK Manager.
• “Android licenses not accepted” → Run flutter doctor --android-licenses and accept all.
• PATH not found → Restart the terminal or computer after modifying PATH.
• Xcode issues on macOS → Open Xcode once and accept the license agreement.

Practice Exercise

Run flutter doctor -v and interpret every line of the output.

LEVEL 3 — Dart Programming From Scratch

Lesson 3.1 — Variables, Types, and Null Safety

Learning Objectives

• Declare variables correctly
• Understand Dart’s type system
• Use null safety confidently

Explanation

Dart is a strongly typed language with type inference. Since Dart 2.12, null safety is enabled by default.

Syntax

// Explicit type
String name = 'Flutter';

// Type inference
var age = 25;
final pi = 3.14159;      // runtime constant
const gravity = 9.81;    // compile-time constant

// Nullable types
String? nickname;        // can be null
String nonNullable = 'Hello'; // cannot be null

Null-aware Operators

String? maybeName;
print(maybeName ?? 'Guest');           // if null, use 'Guest'
print(maybeName?.length);              // safe access
maybeName ??= 'Anonymous';             // assign only if null

Common Mistakes

• Forgetting the ? when a variable can be null
• Using ! (null assertion) without checking, which can throw at runtime

Best Practices

• Prefer non-nullable types whenever possible
• Use late only when you can guarantee initialization before first read
• Prefer final over var when the value will not change

Practice Exercise

Create a small program that declares a nullable string, safely prints its length, and provides a default value.

Lesson 3.2 — Collections, Functions, and Control Flow

Key Topics Covered Thoroughly

• Lists, Sets, Maps
• for, while, do-while, for-in, forEach
• if / else, switch expressions (Dart 3)
• Functions with positional, named, and optional parameters
• Arrow functions
• Higher-order functions

Complete Example — Filtering a List

void main() {
  final numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  final evenNumbers = numbers.where((n) => n.isEven).toList();
  final doubled = numbers.map((n) => n * 2).toList();

  print(evenNumbers); // [2, 4, 6, 8, 10]
  print(doubled);     // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
}

Classes, Inheritance, Mixins, and Generics are taught with progressive examples leading to real-world models (User, Product, Order, etc.).

Async Programming

Futures, async/await, Streams, and error handling with try/catch are covered with practical networking-style examples before moving to Flutter.

LEVEL 4 — Your First Flutter Application

Lesson 4.1 — Project Structure and Hello Flutter

Learning Objectives

• Understand the standard Flutter project structure
• Create and run a basic application
• Learn the roles of main(), runApp(), MaterialApp, and Scaffold

Project Structure (Key Folders)

• lib/ — All Dart source code lives here. main.dart is the entry point.
• android/, ios/, web/, windows/, macos/, linux/ — Platform-specific code.
• pubspec.yaml — Dependencies and assets.
• test/ — Unit and widget tests.

Complete Hello Flutter Application

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello Flutter'),
        centerTitle: true,
      ),
      body: const Center(
        child: Text(
          'Welcome to Flutter Development',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

Code Explanation

• runApp() inflates the given widget and attaches it to the screen.
• MaterialApp provides Material Design theming, navigation, and localization.
• Scaffold implements the basic Material visual layout structure (AppBar, body, FAB, drawer, etc.).

Progressive Enhancement

Students next add a Drawer, BottomNavigationBar, and SafeArea, turning the simple app into a professional-looking starter template.

LEVEL 5 — FLUTTER WIDGETS

Level Overview

In previous levels you learned what Flutter is, how to install it, how Dart works, and how to create a basic application with MaterialApp and Scaffold. Now you will master the building blocks of every Flutter interface: widgets.

Everything you see on the screen is a widget. Understanding widgets deeply — how they are configured, how they receive constraints, how they compose, and how Flutter turns them into pixels — is the foundation of professional Flutter development.

Learning Objectives

• Use basic widgets correctly and style them professionally
• Compose complex layouts with Row, Column, Stack, Expanded, Flexible, and related widgets
• Build efficient scrolling lists and grids with ListView, GridView, and Slivers
• Understand the relationship between Widget, Element, and RenderObject trees
• Diagnose common layout and performance problems related to widgets
• Create reusable, well-structured UI components

Prerequisites

• Comfortable with Dart basics (variables, functions, classes, null safety)
• Able to create and run a simple Flutter application
• Understanding of StatelessWidget, build method, and MaterialApp / Scaffold

Module 1 — Basic Widgets

Lesson 5.1 — Text Widget

What Is It?

Text is the fundamental widget that displays a string of text on the screen. It is immutable and highly configurable through style properties.

Why Is It Important?

Almost every screen contains text. Mastering Text and TextStyle is essential for readable, accessible, and brand-consistent interfaces.

How It Works

The Text widget receives a string and an optional TextStyle. During the layout phase Flutter measures the text using the current font metrics and the constraints given by its parent. The text is then painted onto the canvas.

Syntax and Important Properties

Text(
  String data, {
  Key? key,
  TextStyle? style,
  TextAlign? textAlign,
  TextDirection? textDirection,
  bool softWrap = true,
  TextOverflow? overflow,
  int? maxLines,
  ...
})

Key properties:

• style → controls font size, weight, color, letter spacing, height, etc.
• textAlign → left, center, right, justify
• overflow → clip, fade, ellipsis, visible
• maxLines → limits the number of lines

Basic Example

Text('Hello Flutter')

Complete Code Example

import 'package:flutter/material.dart';

class TextDemo extends StatelessWidget {
  const TextDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Text Widget')),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Primary Heading',
              style: TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.bold,
                color: Colors.black87,
              ),
            ),
            const SizedBox(height: 12),
            Text(
              'This is a longer paragraph that demonstrates soft wrapping, '
              'letter spacing, and line height control for better readability.',
              style: TextStyle(
                fontSize: 16,
                height: 1.5,
                letterSpacing: 0.3,
                color: Colors.grey[800],
              ),
            ),
            const SizedBox(height: 24),
            const Text(
              'This text will be truncated with an ellipsis if it is too long for the available space.',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

Code Explanation

• The first Text uses a large bold style for a heading.
• The second Text demonstrates paragraph styling with height (line height) and letterSpacing.
• The third Text shows maxLines and overflow: TextOverflow.ellipsis — a common pattern for list titles.

Real-World Example

In an e-commerce product card the product name uses maxLines: 2 with ellipsis, the price uses a bold accent color, and the description uses a lighter grey with controlled line height.

Common Mistakes

• Forgetting const when the text never changes (causes unnecessary rebuilds).
• Using very small font sizes without considering accessibility.
• Relying only on color to convey meaning (accessibility problem).

Best Practices

• Prefer Theme.of(context).textTheme over hard-coded styles.
• Always provide a sensible maxLines + overflow for dynamic content.
• Use const Text(...) whenever possible.

Practice Exercises

1. Create three text styles: heading, body, and caption.
2. Display a long sentence that truncates after two lines.
3. Center a title both horizontally and vertically using only Text properties and a parent.

Challenge

Build a “Quote of the Day” card that shows a quote in italic, the author in bold, and handles long quotes gracefully.

Mini Project

Create a simple profile header that shows the user’s full name (large), username (grey), and a short bio that truncates after three lines.

Lesson 5.2 — Icon Widget

What Is It?

Icon displays a graphical symbol from a font (Material Icons, Cupertino Icons, or custom icon fonts).

Why Is It Important?

Icons communicate actions and status faster than text and are essential for modern mobile interfaces.

How It Works

Icons are rendered from a font file. Flutter maps an IconData (code point) to a glyph and paints it at the requested size and color.

Syntax

Icon(
  IconData icon, {
  Key? key,
  double? size,
  Color? color,
  String? semanticLabel,
  TextDirection? textDirection,
})

Complete Code Example

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: const [
    Icon(Icons.home, size: 32, color: Colors.blue),
    Icon(Icons.favorite, size: 32, color: Colors.red),
    Icon(Icons.settings, size: 32, color: Colors.grey),
    Icon(Icons.notifications_active, size: 32, color: Colors.orange),
  ],
)

Real-World Example

Bottom navigation bars, action buttons in AppBars, and status indicators (online/offline, battery, Wi-Fi) all rely heavily on the Icon widget.

Common Mistakes

• Using icons without a semanticLabel (hurts accessibility).
• Hard-coding colors instead of using IconTheme or ColorScheme.

Best Practices

• Always supply semanticLabel for important icons.
• Prefer Icons from Material or create a consistent custom icon set.
• Size icons relative to surrounding text (usually 20–28 logical pixels for body actions).

Practice Exercises

1. Create a row of four action icons with different colors.
2. Add a tooltip to each icon.
3. Build a simple status row (Wi-Fi, battery, signal) using icons.

Lesson 5.3 — Image Widget

What Is It?

Image displays an image from assets, network, memory, or file.

Why Is It Important?

Images are central to modern apps — product photos, avatars, banners, illustrations.

How It Works

Flutter loads the image data, decodes it, and paints it according to the BoxFit and alignment rules. Network images are cached by default.

Important Constructors

• Image.asset
• Image.network
• Image.file
• Image.memory

Complete Code Example

ClipRRect(
  borderRadius: BorderRadius.circular(12),
  child: Image.network(
    'https://picsum.photos/400/300',
    width: double.infinity,
    height: 200,
    fit: BoxFit.cover,
    loadingBuilder: (context, child, loadingProgress) {
      if (loadingProgress == null) return child;
      return const Center(child: CircularProgressIndicator());
    },
    errorBuilder: (context, error, stackTrace) {
      return const Center(child: Icon(Icons.broken_image, size: 48));
    },
  ),
)

Code Explanation

• ClipRRect rounds the corners.
• BoxFit.cover fills the space while preserving aspect ratio.
• loadingBuilder and errorBuilder provide professional loading and error states.

Common Mistakes

• Not handling loading and error states.
• Using very large images without resizing or caching strategy.
• Forgetting to declare assets in pubspec.yaml.

Best Practices

• Always provide loading and error builders for network images.
• Use cached_network_image package for production network images.
• Prefer WebP or properly sized assets.

Practice Exercises

1. Display a local asset image.
2. Display a network image with loading indicator and error fallback.
3. Create a circular avatar using ClipOval + Image.

Lesson 5.4 — Container Widget

What Is It?

Container is a convenience widget that combines painting, positioning, and sizing. It can apply color, decoration, padding, margin, constraints, and transforms.

Why Is It Important?

It is one of the most frequently used widgets for creating cards, buttons, badges, and custom shapes.

How It Works

A Container first applies padding, then constraints, then decoration/color, and finally margin. If no child is provided it tries to be as large as possible (subject to constraints).

Important Properties

• width, height
• padding, margin
• color or decoration
• alignment
• constraints
• transform

Complete Code Example — Product Card Shell

Container(
  margin: const EdgeInsets.all(16),
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.08),
        blurRadius: 12,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  child: const Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Wireless Headphones', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
      SizedBox(height: 8),
      Text('\$129.99', style: TextStyle(fontSize: 16, color: Colors.green)),
    ],
  ),
)

Common Mistakes

• Using both color and decoration (they conflict).
• Putting large margins inside tight constraints, causing overflow.
• Overusing Container when a simpler widget (SizedBox, Padding, ColoredBox) would suffice.

Best Practices

• Prefer DecoratedBox, Padding, SizedBox, or ColoredBox when you need only one feature.
• Use BoxDecoration for borders, gradients, and shadows.
• Keep decoration logic consistent across the app (create reusable card styles).

Lesson 5.5 — SizedBox, Padding, Center

SizedBox

Forces a child to have a specific width and/or height, or creates empty space.

const SizedBox(height: 16)
const SizedBox(width: 8)
SizedBox(width: 120, height: 40, child: ElevatedButton(...))

Padding

Adds empty space around a child.

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  child: Text('Content'),
)

Center

Centers its child within itself (both horizontally and vertically).

const Center(child: Text('Centered'))

When to Use Which

• Use SizedBox for fixed gaps or fixed-size children.
• Use Padding when you only need spacing around a widget.
• Use Center when the main goal is centering.

Common Mistake

Nesting multiple Padding widgets instead of combining values into a single EdgeInsets.

Lesson 5.6 — Card, Divider, Placeholder

Card

A Material Design container with elevation and rounded corners. Prefer Card over a plain Container with shadow when you want standard Material styling.

Card(
  elevation: 2,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Card content'),
  ),
)

Divider

Draws a thin horizontal (or vertical) line.

const Divider(height: 32, thickness: 1)
const VerticalDivider(width: 24, thickness: 1)

Placeholder

A simple box useful during UI development before real content is ready.

const Placeholder(fallbackHeight: 120)

Module 2 — Layout Widgets

Lesson 5.7 — Row and Column

What Are They?

Row lays children out horizontally. Column lays children out vertically. They are the backbone of most Flutter layouts.

How Constraints Work

A Row or Column receives constraints from its parent and passes tight or loose constraints to its children depending on mainAxisSize and the presence of Expanded/Flexible.

Important Properties

• mainAxisAlignment
• crossAxisAlignment
• mainAxisSize
• children

Complete Example — Profile Header

Row(
  children: [
    const CircleAvatar(radius: 32, child: Icon(Icons.person)),
    const SizedBox(width: 16),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text('Sarah Johnson', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          Text('@sarah_j', style: TextStyle(color: Colors.grey)),
        ],
      ),
    ),
    IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
  ],
)

Common Mistakes

• Forgetting Expanded or Flexible when a child needs to take remaining space → overflow errors.
• Nesting too many Row/Column without understanding constraint propagation.

Best Practices

• Prefer Expanded when the child should take all remaining space.
• Prefer Flexible when the child can be smaller than the remaining space.
• Keep the widget tree shallow when possible.

Lesson 5.8 — Expanded and Flexible

Expanded forces a child of a Row/Column/Flex to fill the remaining space along the main axis. Flexible allows a child to fill remaining space but does not force it.

Row(
  children: [
    Container(width: 60, height: 60, color: Colors.red),
    Expanded(child: Container(height: 60, color: Colors.blue)),
    Flexible(child: Container(width: 80, height: 60, color: Colors.green)),
  ],
)

Rule of Thumb

• Use Expanded for flexible content areas (lists, text that should grow).
• Use Flexible when you want the child to keep its intrinsic size if possible.

Lesson 5.9 — Stack and Positioned

Stack places children on top of each other. Positioned (only valid inside a Stack) gives explicit top/right/bottom/left values.

Complete Example — Image with Overlay

Stack(
  children: [
    Image.network('https://picsum.photos/400/250', fit: BoxFit.cover, width: double.infinity, height: 250),
    Positioned(
      bottom: 16,
      left: 16,
      right: 16,
      child: Text(
        'Beautiful Landscape',
        style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, shadows: [
          Shadow(blurRadius: 8, color: Colors.black54),
        ]),
      ),
    ),
    Positioned(
      top: 12,
      right: 12,
      child: IconButton(
        icon: const Icon(Icons.favorite_border, color: Colors.white),
        onPressed: () {},
      ),
    ),
  ],
)

Common Mistakes

• Using Positioned outside a Stack.
• Forgetting that non-positioned children are aligned according to alignment (default top-start).

Lesson 5.10 — Wrap, Align, AspectRatio, FittedBox, ConstrainedBox

• Wrap — like a Row that wraps to the next line when space runs out (chips, tags, filters).
• Align — positions a child within itself using an Alignment value.
• AspectRatio — forces a child to maintain a width/height ratio.
• FittedBox — scales and positions its child within itself.
• ConstrainedBox — imposes additional constraints on its child.

These widgets solve very specific layout problems and are essential for polished UIs.

Module 3 — Scrolling Widgets

Lesson 5.11 — ListView and ListView.builder

ListView is the most common way to display a scrollable list of children. For long or infinite lists always prefer the builder constructor:

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(child: Text('${index + 1}')),
      title: Text(items[index].title),
      subtitle: Text(items[index].subtitle),
      onTap: () {},
    );
  },
)

Why builder?

It lazily builds only the widgets that are visible (plus a small buffer), which is critical for performance with hundreds or thousands of items.

ListView.separated adds a separator between items — ideal for dividers.

Lesson 5.12 — GridView

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 12,
    crossAxisSpacing: 12,
    childAspectRatio: 0.75,
  ),
  itemCount: products.length,
  itemBuilder: (context, index) {
    return ProductCard(product: products[index]);
  },
)

Common Mistake

Using a regular GridView with a large list of children instead of GridView.builder.

Lesson 5.13 — SingleChildScrollView and Nested Scrolling

Use SingleChildScrollView when you have a single child that may overflow (forms, long columns). Avoid nesting scrollable widgets that scroll in the same direction without special handling (NestedScrollView or careful use of PrimaryScrollController).

Lesson 5.14 — CustomScrollView and Slivers

Slivers are the low-level protocol for scrollable areas. CustomScrollView lets you compose multiple slivers:

• SliverAppBar (collapsing header)
• SliverList
• SliverGrid
• SliverToBoxAdapter
• SliverFillRemaining

Example — Collapsing Header + List

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: const Text('My App'),
        background: Image.network('...', fit: BoxFit.cover),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 50,
      ),
    ),
  ],
)

This pattern is used in many professional apps (profile screens, product details, news readers).

Module 4 — Flutter Rendering Architecture

Widget → Element → RenderObject

Widget Tree — Immutable configuration objects. You create them in the build method. They describe what the UI should look like.

Element Tree — Mutable objects that hold the current widget configuration and manage the lifecycle. Elements decide whether an existing element can be updated with a new widget or must be replaced.

RenderObject Tree — The objects that perform layout and painting. Each RenderObject knows its size, position, and how to paint itself.

Phases

1. Build — Widgets are created or updated.
2. Layout — Constraints flow down, sizes flow up.
3. Paint — RenderObjects paint into layers.
4. Compositing — Layers are combined and sent to the GPU.

Understanding this pipeline helps you diagnose why a widget is not appearing, why layout is wrong, or why performance is poor.

Practical Tip

When you call setState, Flutter marks the corresponding element as dirty. Only the dirty subtrees are rebuilt. This is why keeping state as low as possible and using const widgets matters.

Level 5 Practice Project — Product Listing Screen

Build a complete product listing screen that includes:

• A custom AppBar
• A horizontal category list (ListView with horizontal scroll)
• A responsive product grid (GridView.builder)
• Each product card uses Container/Card, Image, Text, Icon, and proper padding
• Pull-to-refresh simulation
• Empty and loading states

This project consolidates everything taught in Level 5.

Level 5 Review Questions

1. What is the difference between Expanded and Flexible?
2. Why should you prefer ListView.builder over ListView for long lists?
3. What happens if you put a Positioned widget outside a Stack?
4. Explain the relationship between Widget, Element, and RenderObject in one paragraph.
5. When would you choose CustomScrollView over a simple ListView?

LEVEL 6 — UI AND RESPONSIVE DESIGN

Level Overview

In Level 5 you learned the individual widgets that form the building blocks of every screen. In this level you will learn how to style those widgets consistently, create professional visual systems, and make interfaces that adapt gracefully to different screen sizes, orientations, and platforms.

Learning Objectives

• Create and apply a complete Material 3 theme (light and dark)
• Use ColorScheme, TextTheme, and component themes correctly
• Build consistent buttons, cards, dialogs, bottom sheets, and snack bars
• Control spacing, shapes, and elevation systematically
• Make layouts respond to screen size, orientation, and platform
• Use MediaQuery, LayoutBuilder, and OrientationBuilder effectively
• Design interfaces that work well on phones, tablets, foldables, desktop, and web

Prerequisites

• Solid understanding of basic and layout widgets (Level 5)
• Ability to create StatelessWidget and StatefulWidget
• Familiarity with Scaffold, AppBar, and basic navigation

Module 1 — Material Design and Material 3

Lesson 6.1 — What Is Material Design and Material 3?

What Is It?

Material Design is Google’s design system. Material 3 (also called Material You) is the latest version. It emphasizes dynamic color, larger shapes, improved accessibility, and personalization.

Why Is It Important?

Using Material 3 gives your application a modern, consistent look that users already understand. It also provides built-in support for light/dark themes, dynamic color, and accessible contrast.

How It Works in Flutter

Flutter implements Material 3 through ThemeData and ColorScheme. When you set useMaterial3: true, many widgets automatically adopt the new visual language.

Basic Theme Setup

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xFF6750A4),
      brightness: Brightness.light,
    ),
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xFF6750A4),
      brightness: Brightness.dark,
    ),
  ),
  themeMode: ThemeMode.system,
  home: const HomePage(),
)

Code Explanation

• ColorScheme.fromSeed generates a full harmonious palette from a single seed color.
• theme and darkTheme define the two modes.
• themeMode: ThemeMode.system follows the device setting.

Common Mistakes

• Setting useMaterial3: true but still using old Material 2 color properties.
• Hard-coding colors instead of reading from Theme.of(context).colorScheme.

Best Practices

• Always generate the ColorScheme from a seed.
• Prefer semantic colors (primary, onPrimary, surface, onSurface, error, etc.) over raw color values.
• Keep light and dark themes in sync by using the same seed.

Practice Exercise

Create a MaterialApp that switches between light and dark themes using a switch in the AppBar.

Lesson 6.2 — ColorScheme in Depth

Key Properties You Will Use Daily

• primary / onPrimary
• secondary / onSecondary
• surface / onSurface
• background / onBackground (now largely replaced by surface)
• error / onError
• outline, shadow, scrim, etc.

How to Access Colors

final colorScheme = Theme.of(context).colorScheme;

Container(
  color: colorScheme.primaryContainer,
  child: Text(
    'Hello',
    style: TextStyle(color: colorScheme.onPrimaryContainer),
  ),
)

Best Practice

Never hard-code Colors.blue or Color(0xFF...) in widgets when a semantic color exists. Always pull from the ColorScheme.

Lesson 6.3 — Typography and TextTheme

Material 3 Text Roles

displayLarge → displaySmall, headlineLarge → headlineSmall, titleLarge → titleSmall, bodyLarge → bodySmall, labelLarge → labelSmall

Complete Example

Text(
  'Welcome back',
  style: Theme.of(context).textTheme.headlineMedium?.copyWith(
    fontWeight: FontWeight.bold,
  ),
)

Text(
  'Here is your dashboard summary for today.',
  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
    color: Theme.of(context).colorScheme.onSurfaceVariant,
  ),
)

Custom Fonts

1. Add the font files to an assets/fonts folder.
2. Declare them in pubspec.yaml.
3. Apply them in ThemeData:

theme: ThemeData(
  useMaterial3: true,
  fontFamily: 'Inter',
  textTheme: const TextTheme(
    headlineMedium: TextStyle(fontFamily: 'Inter', fontWeight: FontWeight.w600),
    bodyLarge: TextStyle(fontFamily: 'Inter'),
  ),
)

Common Mistake

Overriding too many text styles with one-off TextStyle instead of extending the theme.

Best Practice

Create a small set of semantic text styles and reuse them. Use copyWith only for minor adjustments.

Module 2 — Common UI Components

Lesson 6.4 — Buttons

Flutter provides several Material 3 button types: ElevatedButton, FilledButton, FilledButton.tonal, OutlinedButton, TextButton, IconButton, FloatingActionButton.

Professional Button Example

FilledButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.add),
  label: const Text('Create New'),
  style: FilledButton.styleFrom(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
  ),
)

Best Practices

• Prefer FilledButton for the primary action on a screen.
• Use OutlinedButton or TextButton for secondary actions.
• Keep button height consistent (usually 40–48 logical pixels).
• Always provide an onPressed of null when the button should appear disabled.

Lesson 6.5 — Cards, Dialogs, Bottom Sheets, and SnackBars

Card

Card(
  elevation: 0,
  color: Theme.of(context).colorScheme.surfaceContainerHighest,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Revenue', style: Theme.of(context).textTheme.titleMedium),
        const SizedBox(height: 8),
        Text('\$24,500', style: Theme.of(context).textTheme.headlineSmall),
      ],
    ),
  ),
)

Dialog

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: const Text('Confirm Delete'),
    content: const Text('This action cannot be undone.'),
    actions: [
      TextButton(onPressed: () => Navigator.pop(context), child: const Text('Cancel')),
      FilledButton(onPressed: () => Navigator.pop(context, true), child: const Text('Delete')),
    ],
  ),
);

Bottom Sheet

showModalBottomSheet(
  context: context,
  showDragHandle: true,
  builder: (context) => Padding(
    padding: const EdgeInsets.all(24),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Options', style: Theme.of(context).textTheme.titleLarge),
        const SizedBox(height: 16),
        ListTile(leading: const Icon(Icons.share), title: const Text('Share'), onTap: () {}),
        ListTile(leading: const Icon(Icons.link), title: const Text('Copy Link'), onTap: () {}),
      ],
    ),
  ),
);

SnackBar

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: const Text('Item saved successfully'),
    behavior: SnackBarBehavior.floating,
    action: SnackBarAction(label: 'Undo', onPressed: () {}),
  ),
);

Common Mistakes

• Using the root ScaffoldMessenger incorrectly when you have nested Scaffolds.
• Making bottom sheets too tall without making them scrollable.

Lesson 6.6 — Spacing, Shapes, and Elevation

Spacing System — Professional applications use a consistent spacing scale (usually multiples of 4 or 8): 4, 8, 12, 16, 24, 32, 48, 64.

class AppSpacing {
  static const double xs = 4;
  static const double sm = 8;
  static const double md = 16;
  static const double lg = 24;
  static const double xl = 32;
}

Shapes — Material 3 encourages larger corner radii (12–28).

class AppShapes {
  static final small = RoundedRectangleBorder(borderRadius: BorderRadius.circular(8));
  static final medium = RoundedRectangleBorder(borderRadius: BorderRadius.circular(12));
  static final large = RoundedRectangleBorder(borderRadius: BorderRadius.circular(16));
}

Module 3 — Responsive and Adaptive Design

Lesson 6.7 — MediaQuery

MediaQuery gives you information about the current screen: size, orientation, padding (notches, system UI), text scale factor, brightness, etc.

final size = MediaQuery.sizeOf(context);
final padding = MediaQuery.paddingOf(context);
final orientation = MediaQuery.orientationOf(context);
final textScaler = MediaQuery.textScalerOf(context);

Example — Avoiding the Notch

Padding(
  padding: EdgeInsets.only(top: MediaQuery.paddingOf(context).top),
  child: ...,
)

Or simply wrap content with SafeArea.

Lesson 6.8 — LayoutBuilder and Breakpoints

LayoutBuilder gives you the constraints of the parent, which is more reliable than MediaQuery when the widget is not full-screen.

class Breakpoints {
  static const double mobile = 600;
  static const double tablet = 900;
  static const double desktop = 1200;
}

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      if (constraints.maxWidth < Breakpoints.mobile) {
        return const MobileLayout();
      } else if (constraints.maxWidth < Breakpoints.tablet) {
        return const TabletLayout();
      } else {
        return const DesktopLayout();
      }
    },
  );
}

Real-World Pattern

• Mobile: bottom navigation + single column
• Tablet: navigation rail + two columns
• Desktop: navigation rail or side drawer + multi-column content

Lesson 6.9 — OrientationBuilder

OrientationBuilder(
  builder: (context, orientation) {
    if (orientation == Orientation.portrait) {
      return const PortraitLayout();
    } else {
      return const LandscapeLayout();
    }
  },
)

Lesson 6.10 — Adaptive Navigation and Responsive Grids

Navigation Patterns

• Phone → NavigationBar (bottom)
• Tablet / Desktop → NavigationRail or NavigationDrawer

Responsive Grid Example

GridView.builder(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 300,
    mainAxisSpacing: 16,
    crossAxisSpacing: 16,
    childAspectRatio: 0.75,
  ),
  itemBuilder: ...,
)

Level 6 Mini Project — Responsive Dashboard

Build a complete dashboard that includes:

• A proper Material 3 theme (light + dark) with a brand seed color.
• An AppBar with theme toggle.
• A responsive body (mobile: vertical list + bottom navigation; tablet/desktop: NavigationRail + multi-column grid).
• At least four summary cards using consistent spacing, typography, and ColorScheme colors.
• A floating action button that shows a modal bottom sheet with quick actions.
• A SnackBar confirmation when an action is performed.
• Safe handling of notches and system UI with SafeArea.

Level 6 Review Questions

1. Why should you prefer ColorScheme.fromSeed over manually defining every color?
2. What is the difference between MediaQuery.sizeOf(context) and the constraints given by LayoutBuilder?
3. When would you choose a NavigationRail instead of a NavigationBar?
4. Explain why hard-coding colors and text styles makes dark mode difficult.
5. What is the recommended way to handle the status bar and notch area?

LEVEL 7 — NAVIGATION AND ROUTING

Level Overview

Real applications contain many screens. This level teaches you how Flutter handles navigation — from the classic imperative Navigator API to modern declarative routing.

Learning Objectives

• Navigate between screens using Navigator
• Define and use named routes
• Pass arguments to a screen and return results
• Implement nested navigation
• Build bottom navigation with state preservation using IndexedStack
• Protect routes that require the user to be logged in
• Understand the difference between imperative and declarative routing
• Structure a complete multi-screen application with a clean navigation flow

Prerequisites

• Comfortable creating StatelessWidget and StatefulWidget
• Understanding of Scaffold, AppBar, and basic Material widgets
• Basic knowledge of async/await (for returning results)

Module 1 — Core Navigation Concepts

Lesson 7.1 — Navigator and Basic Navigation

What Is It?

The Navigator is a Flutter widget that manages a stack of routes (screens). When you push a new route, it is added on top of the stack. When you pop, the top route is removed and the previous screen becomes visible again.

Basic Syntax

// Push a new screen
Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => const SecondScreen(),
  ),
);

// Pop the current screen
Navigator.of(context).pop();

Complete Example — Two Screens

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: FilledButton(
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => const DetailsScreen(),
              ),
            );
          },
          child: const Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  const DetailsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: Center(
        child: FilledButton(
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

Code Explanation

• MaterialPageRoute creates a platform-adaptive transition (slide on iOS, fade/slide on Android).
• The builder function returns the widget that should be shown for that route.
• pop() removes the current route and returns to the previous one.

Common Mistakes

• Calling Navigator.pop(context) when there is nothing to pop (can throw).
• Using BuildContext after an async gap without checking mounted.

Best Practices

• Prefer Navigator.of(context).push over the shorter Navigator.push(context, ...) for clarity.
• Always check if (context.mounted) before using the context after an await.

Lesson 7.2 — Passing Arguments to a Screen

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => ProductDetailsScreen(productId: 42),
  ),
);

class ProductDetailsScreen extends StatelessWidget {
  const ProductDetailsScreen({super.key, required this.productId});

  final int productId;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Product $productId')),
      body: Center(child: Text('Showing product #$productId')),
    );
  }
}

Lesson 7.3 — Returning Data from a Screen

// From the first screen
final result = await Navigator.of(context).push<String>(
  MaterialPageRoute(builder: (context) => const SelectionScreen()),
);

if (result != null && context.mounted) {
  print('User selected: $result');
}

// Inside SelectionScreen
Navigator.of(context).pop('Selected Value');

Common Mistake

Forgetting to type the generic (push<String>) and then struggling with dynamic types.

Module 2 — Named Routes

Lesson 7.4 — Named Routes

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const HomeScreen(),
    '/details': (context) => const DetailsScreen(),
    '/profile': (context) => const ProfileScreen(),
    '/settings': (context) => const SettingsScreen(),
  },
)

Navigator.of(context).pushNamed('/details');
Navigator.of(context).pushNamed('/profile');
Navigator.of(context).pop();

Passing Arguments with Named Routes

Navigator.of(context).pushNamed(
  '/details',
  arguments: 42,
);

// Inside DetailsScreen
final productId = ModalRoute.of(context)!.settings.arguments as int;

When Named Routes Become Limiting

Named routes work well for simple applications. When you need strongly typed arguments, route guards, deep linking, or nested navigation, most professional teams move to a declarative solution such as go_router.

Module 3 — Bottom Navigation and State Preservation

Lesson 7.5 — BottomNavigationBar + IndexedStack

The Problem

If you simply swap the body of a Scaffold when the user taps a bottom navigation item, the state of each tab is lost (scroll position, form data, etc.).

The Professional Solution

Keep all tab screens alive and only change which one is visible using IndexedStack.

class MainShell extends StatefulWidget {
  const MainShell({super.key});

  @override
  State<MainShell> createState() => _MainShellState();
}

class _MainShellState extends State<MainShell> {
  int _currentIndex = 0;

  final List<Widget> _pages = const [
    HomeTab(),
    SearchTab(),
    OrdersTab(),
    ProfileTab(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _currentIndex,
        onDestinationSelected: (index) {
          setState(() => _currentIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home_outlined), selectedIcon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.receipt_long_outlined), selectedIcon: Icon(Icons.receipt_long), label: 'Orders'),
          NavigationDestination(icon: Icon(Icons.person_outline), selectedIcon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}

Why IndexedStack?

All children stay in the widget tree. Only the visibility changes. Scroll positions and internal state are preserved.

Common Mistake

Rebuilding the entire page list on every tab change instead of keeping the list constant.

Module 4 — Nested Navigation and Protected Routes

Lesson 7.6 — Nested Navigation

Each tab can have its own navigation stack. This is common in apps where the Home tab can push detail screens while the Profile tab has its own stack. You achieve this by giving each tab its own Navigator (or by using a declarative router that supports nested routes).

Lesson 7.7 — Protected Routes (Authentication Guard)

Concept

Some screens should only be accessible when the user is logged in.

void openProfile(BuildContext context, bool isLoggedIn) {
  if (isLoggedIn) {
    Navigator.of(context).pushNamed('/profile');
  } else {
    Navigator.of(context).pushNamed('/login');
  }
}

Better Approach

Centralize the decision in your routing layer so individual buttons do not need to know about authentication logic.

Module 5 — Modern Declarative Routing (go_router Concepts)

Why Declarative Routing?

Imperative navigation (push, pop) becomes hard to maintain in large applications. Declarative routing describes the entire navigation state as a function of application state. Deep linking, web support, and authentication redirects become much cleaner.

Core Ideas

• Routes are declared in one place.
• Redirects can be performed based on authentication state.
• Path parameters (/product/:id) are first-class.
• Nested navigation is supported naturally.

Level 7 Mini Project — Complete Multi-Screen Application

Build an application with the following screens and flows:

• Splash Screen — Shows for 2 seconds, then redirects to Login or Home depending on authentication state.
• Login Screen — Email + password fields. On success → Home. Link to Registration.
• Registration Screen — Name, email, password. On success → Home.
• Main Shell (after login) — Bottom navigation with four tabs: Home, Search, Orders, Profile. Use IndexedStack so state is preserved.
• Home Tab — List of items. Tapping an item pushes a Detail screen (nested navigation).
• Profile Tab — Shows user info + Logout button. Logout clears the session and returns to Login (clearing the navigation stack).
• Settings Screen — Reachable from Profile.

Requirements

• Use named routes or a clean Navigator structure.
• Pass at least one argument between screens.
• Return a result from one screen.
• Protect the Main Shell so it cannot be opened without “login”.
• Preserve tab state with IndexedStack.
• Handle the back button correctly on Android.

Level 7 Review Questions

1. What is the difference between push and pushReplacement?
2. Why is IndexedStack preferred over simply swapping widgets for bottom navigation?
3. How do you safely return data from a screen that was opened with push?
4. What problem do protected routes solve?
5. When does the classic Navigator API start to feel limited?

LEVEL 8 — USER INPUT AND FORMS

Level Overview

This level teaches you how to build professional forms in Flutter: controlled text input, validation, focus management, different input types, date and time selection, and how to provide clear feedback while a form is being submitted.

Learning Objectives

• Use TextField and TextFormField correctly
• Manage text with TextEditingController
• Control focus with FocusNode
• Build forms with validation using Form and FormState
• Create custom validators
• Use dropdowns, checkboxes, radio buttons, and switches
• Show date and time pickers
• Handle loading and error states during form submission
• Build a complete, production-style registration and login form

Prerequisites

• Comfortable with StatelessWidget and StatefulWidget
• Understanding of basic layout widgets and theming
• Basic knowledge of navigation (push/pop)

Module 1 — Text Input Fundamentals

Lesson 8.1 — TextField and TextFormField

What Is It?

TextField is a basic material text input. TextFormField is the same input but designed to work inside a Form. It supports validation and integrates with FormState.

Basic Syntax

TextField(
  decoration: InputDecoration(
    labelText: 'Email',
    hintText: 'Enter your email',
    border: OutlineInputBorder(),
  ),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
)

Preferred for Forms — TextFormField

TextFormField(
  decoration: const InputDecoration(
    labelText: 'Email',
    prefixIcon: Icon(Icons.email_outlined),
    border: OutlineInputBorder(),
  ),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Email is required';
    }
    if (!value.contains('@')) {
      return 'Enter a valid email';
    }
    return null;
  },
)

Common Mistakes

• Using TextField inside a Form and then trying to validate it (it will not participate in form validation).
• Forgetting to dispose of controllers (memory leak).

Best Practices

• Prefer TextFormField whenever the field belongs to a form.
• Always provide a clear labelText or hintText.
• Use appropriate keyboardType and textInputAction.

Lesson 8.2 — TextEditingController

Complete Example

class LoginForm extends StatefulWidget {
  const LoginForm({super.key});

  @override
  State<LoginForm> createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          controller: _emailController,
          decoration: const InputDecoration(labelText: 'Email'),
        ),
        const SizedBox(height: 16),
        TextFormField(
          controller: _passwordController,
          decoration: const InputDecoration(labelText: 'Password'),
          obscureText: true,
        ),
      ],
    );
  }
}

Important Rules

• Create the controller in State.
• Always call dispose() on every controller.
• Never create a controller inside the build method.

Lesson 8.3 — FocusNode and Keyboard Handling

Example — Moving Focus

final _emailFocus = FocusNode();
final _passwordFocus = FocusNode();

TextFormField(
  focusNode: _emailFocus,
  textInputAction: TextInputAction.next,
  onFieldSubmitted: (_) {
    _passwordFocus.requestFocus();
  },
)

Dismissing the Keyboard

GestureDetector(
  onTap: () => FocusScope.of(context).unfocus(),
  child: Scaffold(...),
)

Best Practice

Dispose of every FocusNode you create, just like controllers.

Module 2 — Forms and Validation

Lesson 8.4 — Form and FormState

Complete Pattern

class RegistrationForm extends StatefulWidget {
  const RegistrationForm({super.key});

  @override
  State<RegistrationForm> createState() => _RegistrationFormState();
}

class _RegistrationFormState extends State<RegistrationForm> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  bool _isLoading = false;

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  Future<void> _submit() async {
    if (!_formKey.currentState!.validate()) return;

    setState(() => _isLoading = true);

    // Simulate network request
    await Future.delayed(const Duration(seconds: 2));

    if (mounted) {
      setState(() => _isLoading = false);
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Registration successful')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            controller: _nameController,
            decoration: const InputDecoration(labelText: 'Full Name'),
            validator: (value) =>
                value == null || value.trim().isEmpty ? 'Name is required' : null,
          ),
          const SizedBox(height: 16),
          TextFormField(
            controller: _emailController,
            decoration: const InputDecoration(labelText: 'Email'),
            keyboardType: TextInputType.emailAddress,
            validator: (value) {
              if (value == null || value.isEmpty) return 'Email is required';
              if (!value.contains('@')) return 'Enter a valid email';
              return null;
            },
          ),
          const SizedBox(height: 16),
          TextFormField(
            controller: _passwordController,
            decoration: const InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: (value) {
              if (value == null || value.length < 6) {
                return 'Password must be at least 6 characters';
              }
              return null;
            },
          ),
          const SizedBox(height: 24),
          SizedBox(
            width: double.infinity,
            child: FilledButton(
              onPressed: _isLoading ? null : _submit,
              child: _isLoading
                  ? const SizedBox(
                      height: 20,
                      width: 20,
                      child: CircularProgressIndicator(strokeWidth: 2),
                    )
                  : const Text('Create Account'),
            ),
          ),
        ],
      ),
    );
  }
}

Code Explanation

• The GlobalKey<FormState> gives you access to validate() and save().
• validate() runs every field’s validator.
• The button is disabled and shows a loading indicator while the request is in progress.
• mounted is checked after the async gap.

Common Mistakes

• Creating the GlobalKey inside build.
• Forgetting to disable the button while loading (user can submit multiple times).
• Not checking mounted after an await.

Lesson 8.5 — Custom Validators and Reusability

String? requiredValidator(String? value) {
  if (value == null || value.trim().isEmpty) return 'This field is required';
  return null;
}

String? emailValidator(String? value) {
  if (value == null || value.isEmpty) return 'Email is required';
  final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
  if (!emailRegex.hasMatch(value)) return 'Enter a valid email address';
  return null;
}

String? passwordValidator(String? value) {
  if (value == null || value.length < 8) {
    return 'Password must be at least 8 characters';
  }
  return null;
}

Module 3 — Other Common Form Controls

Lesson 8.6 — Dropdown, Checkbox, Radio, Switch

DropdownButtonFormField

String? _selectedRole;

DropdownButtonFormField<String>(
  value: _selectedRole,
  decoration: const InputDecoration(labelText: 'Role'),
  items: const [
    DropdownMenuItem(value: 'user', child: Text('User')),
    DropdownMenuItem(value: 'editor', child: Text('Editor')),
    DropdownMenuItem(value: 'admin', child: Text('Admin')),
  ],
  onChanged: (value) => setState(() => _selectedRole = value),
  validator: (value) => value == null ? 'Please select a role' : null,
)

Checkbox

bool _agreeToTerms = false;

CheckboxListTile(
  title: const Text('I agree to the Terms of Service'),
  value: _agreeToTerms,
  onChanged: (value) => setState(() => _agreeToTerms = value ?? false),
  controlAffinity: ListTileControlAffinity.leading,
)

Switch

SwitchListTile(
  title: const Text('Enable notifications'),
  value: _notificationsEnabled,
  onChanged: (value) => setState(() => _notificationsEnabled = value),
)

Lesson 8.7 — Date and Time Pickers