Named Routes

Clean navigation with route names.

Named Routes in Flutter

Named routes let you define all your screen mappings in one place, inside MaterialApp's routes property. Instead of creating MaterialPageRoute objects everywhere, you just refer to a route by its string name. This keeps your navigation code clean and easy to maintain.

import 'package:flutter/material.dart';

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/settings');
          },
          child: Text('Go to Settings'),
        ),
      ),
    );
  }
}

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

Try it Yourself ->

Navigator.pushNamed

Once routes are defined in MaterialApp, you navigate to them by calling Navigator.pushNamed with the route's string name. It's shorter and cleaner than creating MaterialPageRoute every time. You can still pass arguments along with the named route if needed.

// Simple named route navigation
Navigator.pushNamed(context, '/details');

// Pop back
Navigator.pop(context);

Try it Yourself ->

OnGenerateRoute for Dynamic Routes

Sometimes you need routes that change based on data, like showing a user profile for a specific user ID. OnGenerateRoute lets you parse the route name and extract parameters dynamically. It acts as a factory for routes that aren't predefined.

MaterialApp(
  onGenerateRoute: (RouteSettings settings) {
    final uri = Uri.parse(settings.name ?? '');

    if (uri.path == '/profile') {
      final userId = uri.queryParameters['id'];
      return MaterialPageRoute(
        builder: (context) => ProfileScreen(userId: userId ?? 'unknown'),
      );
    }

    return MaterialPageRoute(
      builder: (context) => NotFoundScreen(),
    );
  },
);

// Navigate like this:
Navigator.pushNamed(context, '/profile?id=42');

Try it Yourself ->

← Basic Navigation

Passing Data Between Screens →