The Project | About Us | Contribute | Donations | License

HOME

In this section, we will explore the fundamental concepts of navigation in Flutter. Navigation is a crucial aspect of any mobile application, allowing users to move between different screens or pages. Flutter provides a robust and flexible navigation system that can be easily implemented using the Navigator class and routes.

Key Concepts

Navigator Class: Manages a stack of routes and provides methods to navigate between them.
Routes: Represent the screens or pages in your application.
Push and Pop: Methods to add and remove routes from the navigation stack.

Navigator Class

The Navigator class is the core of Flutter's navigation system. It manages a stack of Route objects and provides methods to navigate between them.

Common Methods

Navigator.push: Adds a new route to the stack.
Navigator.pop: Removes the current route from the stack.
Navigator.pushReplacement: Replaces the current route with a new one.
Navigator.pushNamed: Adds a named route to the stack.

Routes

Routes are the screens or pages in your application. They can be defined as simple widgets or more complex structures.

Defining Routes

Routes can be defined in two ways:

Directly in the Navigator methods.
Using named routes.

Practical Example

Let's create a simple Flutter application with two screens and navigate between them using the Navigator class.

Step 1: Create a New Flutter Project

flutter create basic_navigation
cd basic_navigation

Step 2: Define the Home Screen

Create a new file home_screen.dart and define the HomeScreen widget.

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

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'),
        ),
      ),
    );
  }
}

Step 3: Define the Second Screen

Create a new file second_screen.dart and define the SecondScreen widget.

import 'package:flutter/material.dart';

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'),
        ),
      ),
    );
  }
}

Step 4: Update the Main File

Update the main.dart file to use the HomeScreen as the initial route.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic Navigation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

Step 5: Run the Application

Run the application using the following command:

flutter run

You should see the Home Screen with a button that navigates to the Second Screen. The Second Screen has a button to navigate back to the Home Screen.

Summary

In this section, we covered the basics of navigation in Flutter using the Navigator class and routes. We created a simple application with two screens and demonstrated how to navigate between them using the Navigator.push and Navigator.pop methods. Understanding these fundamental concepts is essential for building more complex navigation flows in your Flutter applications.

Next, we will explore named routes, which provide a more organized and scalable way to manage navigation in larger applications.

Basic Navigation

Key Concepts

Navigator Class

Common Methods

Routes

Defining Routes

Practical Example

Step 1: Create a New Flutter Project

Step 2: Define the Home Screen

Step 3: Define the Second Screen

Step 4: Update the Main File

Step 5: Run the Application

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