Navigation in Flutter: Navigator, Passing Data & Named Routes

Introduction

Navigation is a fundamental concept in mobile app development. In Flutter, navigation allows users to move between different screens (also called routes). Flutter provides a powerful navigation system using the Navigator class, making it easy to manage screen transitions and data flow.

In this blog, you will learn:

• Navigation between screens using Navigator

• Passing data between screens

• Using named routes for scalable apps

• Practical Flutter code examples

What is Navigation in Flutter?

In Flutter, each screen is represented as a Widget. Navigation means moving from one widget (screen) to another.

Flutter uses a stack-based navigation system, where:

• New screens are pushed onto the stack

• Old screens are popped from the stack

1. Navigation Between Screens Using Navigator

The Navigator class is used to manage routes (screens).

Key Methods:

• Navigator.push() → Move to a new screen

• Navigator.pop() → Go back to previous screen

Example: Basic Navigation

Step 1: Create First Screen

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

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

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

Step 2: Create Second Screen

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(
          child: Text("Go Back"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

How It Works

• MaterialPageRoute creates a route with animation

• Navigator.push() adds a new screen to the stack

• Navigator.pop() removes the current screen

2. Passing Data Between Screens

In real-world apps, you often need to send data between screens.

Example: Passing Data Forward

Step 1: Modify Second Screen

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  final String message;

  SecondScreen({required this.message});

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

Step 2: Pass Data from First Screen

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen(message: "Hello from First Screen")),
);

Example: Returning Data Back

You can also send data back using Navigator.pop().

Navigator.pop(context, "Data from Second Screen");

final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);

print(result);

3. Named Routes in Flutter

Named routes help manage navigation in larger applications.

Instead of creating routes manually, you define route names.

Step 1: Define Routes in MaterialApp

Step 2: Navigate Using Named Routes

Step 3: Passing Arguments in Named Routes

Step 4: Receive Arguments

Best Practices for Flutter Navigation

✔ Use Navigator.push for simple apps
✔ Use named routes for large applications
✔ Avoid deeply nested navigation
✔ Manage state properly when passing data
✔ Use async/await for returning results

Conclusion

Navigation in Flutter is simple yet powerful. By mastering:

• Navigator push/pop

• Data passing between screens

• Named routes

You can build scalable and professional mobile applications.

Flutter’s navigation system ensures smooth user experience and structured code organization, making it ideal for both small and large projects.