Navigation & Routing

Navigation & Routing in Flutter

Flutter provides multiple ways to handle navigation between screens. Let's explore the most common approaches from basic to advanced.

Basic Navigation

  ┌─────────────────────────────────────────────────┐
  │           Navigation Methods                    │
  ├─────────────────────────────────────────────────┤
  │                                                  │
  │  Navigator.push()     → Go to new screen        │
  │  Navigator.pop()      → Go back                 │
  │  Navigator.pushReplacement() → Replace screen   │
  │                                                  │
  │  Screen 1 ─────push()────→ Screen 2            │
  │     ↑                         │                 │
  │     └────────pop()────────────┘                 │
  │                                                  │
  └─────────────────────────────────────────────────┘

Navigator.push Example

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: HomeScreen()));

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

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

Named Routes

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

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

// Navigate using named route
Navigator.pushNamed(context, '/details');

// Pass arguments
Navigator.pushNamed(context, '/details', arguments: {'id': 123});

// Receive arguments
final args = ModalRoute.of(context)!.settings.arguments as Map;

Navigation 2.0 (Declarative)

For complex apps, Flutter offers a declarative routing API that lets you manage navigation state like any other state in your app. This is especially useful with state management solutions like Provider or Riverpod.