Learn Named Routes | Navigation Fundamentals

Definition

Named routes are string identifiers that represent screens in a Flutter app. Instead of directly referencing screen widgets when navigating, you use a string name to identify the destination. This makes navigation logic more organized and easier to manage, especially as the app grows.

When you use named routes in Flutter, you define a map of route names to widget builder functions in the MaterialApp widget. This map tells Flutter which widget to show for each route name. By centralizing route definitions, you make your navigation structure clear and maintainable.

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailsScreen(),
      },
    );
  }
}

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 DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: Text('Details Screen'),
      ),
    );
  }
}

Named routes also make it easier to pass data between screens. You can provide arguments when you call Navigator.pushNamed, and then extract those arguments in the target screen. This keeps your navigation logic clean and decoupled from widget construction.

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes with Arguments',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailsScreen(),
      },
    );
  }
}

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',
              arguments: 'Hello from HomeScreen!',
            );
          },
          child: Text('Go to Details with Argument'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: Text('Argument received: $args'),
      ),
    );
  }
}

Note

Named routes are especially useful for large apps with many screens. They help you avoid hardcoding navigation logic throughout your codebase and make it easier to manage and refactor routes as your app grows.

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Swipe to show menu

Definition

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailsScreen(),
      },
    );
  }
}

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 DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: Text('Details Screen'),
      ),
    );
  }
}

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes with Arguments',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailsScreen(),
      },
    );
  }
}

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',
              arguments: 'Hello from HomeScreen!',
            );
          },
          child: Text('Go to Details with Argument'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: Text('Argument received: $args'),
      ),
    );
  }
}

Note

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 2