The Project | About Us | Contribute | Donations | License

HOME

Navigation is a fundamental aspect of mobile app development, allowing users to move between different screens or pages within an app. In Flutter, navigation is managed through a powerful and flexible system that can handle simple to complex navigation scenarios. This section will introduce you to the basics of navigation in Flutter, including the core concepts and how to implement basic navigation in your Flutter applications.

Key Concepts

Navigator: The Navigator widget manages a stack of Route objects and provides methods for managing the stack, such as pushing and popping routes.
Route: A Route is an abstraction for a screen or page in your app. It represents a single entry in the Navigator's stack.
MaterialPageRoute: A commonly used route that creates a material design page transition.
Navigator.push(): A method to add a new route to the stack.
Navigator.pop(): A method to remove the current route from the stack.

Basic Navigation Example

Let's start with a simple example to demonstrate basic navigation in Flutter. We'll create two screens: a Home screen and a Details screen. We'll navigate from the Home screen to the Details screen using a button.

Step 1: Create a New Flutter Project

First, create a new Flutter project if you haven't already:

flutter create navigation_example
cd navigation_example

Step 2: Define the Home Screen

Open lib/main.dart and define the Home screen:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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) => DetailsScreen()),
            );
          },
          child: Text('Go to Details Screen'),
        ),
      ),
    );
  }
}

Step 3: Define the Details Screen

Next, define the Details screen:

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

Explanation

MaterialApp: The root widget of the application. It sets up the app's theme and home screen.
HomeScreen: The initial screen of the app. It contains a button that navigates to the Details screen.
DetailsScreen: The second screen. It contains a button that navigates back to the Home screen.
Navigator.push(): Adds the Details screen to the navigation stack.
Navigator.pop(): Removes the current screen (Details screen) from the stack, returning to the previous screen (Home screen).

Running the App

Run the app using the following command:

flutter run

You should see the Home screen with a button labeled "Go to Details Screen." When you tap the button, it navigates to the Details screen. On the Details screen, there's a button labeled "Go Back" that navigates back to the Home screen.

Summary

In this section, you learned the basics of navigation in Flutter. You now understand the core concepts of the Navigator and Route, and you have implemented basic navigation between two screens using Navigator.push() and Navigator.pop(). This foundational knowledge will be essential as you explore more advanced navigation techniques in the following sections.

Introduction to Navigation

Key Concepts

Basic Navigation Example

Step 1: Create a New Flutter Project

Step 2: Define the Home Screen

Step 3: Define the Details Screen

Explanation

Running the App

Summary

Flutter Development Course

Module 1: Introduction to Flutter

Module 2: Dart Programming Basics

Module 3: Flutter Widgets

Module 4: State Management

Module 5: Navigation and Routing

Module 6: Networking and APIs

Module 7: Persistence and Storage

Module 8: Advanced Flutter Concepts

Module 9: Testing and Debugging

Module 10: Deployment and Maintenance

Module 11: Flutter for Web and Desktop