Learn Named Routes in Flutter (Navigator 1.0) #

Named routes are a way to manage navigation using string-based route names instead of directly pushing widgets. They help keep navigation clean, centralized, and scalable, especially in medium to large Flutter apps.

Named routes are part of Navigator 1.0.

---

Why Use Named Routes? #

• Centralized route management
• Cleaner navigation calls
• Easier refactoring
• Better structure for large apps
• Useful for auth flows and role-based navigation

---

Basic Setup Named Routes #

Define Routes in MaterialApp #

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/login': (context) => LoginScreen(),
    '/profile': (context) => ProfileScreen(),
  },
);

---

Navigate Using Named Routes #

1. Push a Route #

Navigator.pushNamed(context, '/profile');

22. Go Back #

Navigator.pop(context);

---

Passing Data Using Named Routes #

1. Send Arguments #

Navigator.pushNamed(
  context,
  '/profile',
  arguments: 'Muhammad Shoaib',
);

2. Receive Arguments #

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String name =
        ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      body: Center(child: Text(name)),
    );
  }
}

---

Handling Unknown Routes #

onUnknownRoute #

MaterialApp(
  onUnknownRoute: (settings) {
    return MaterialPageRoute(
      builder: (_) => NotFoundScreen(),
    );
  },
);

---

Dynamic Routes with onGenerateRoute #

Use onGenerateRoute when:

• You need arguments
• You want dynamic route handling
• You want better control

Example #

MaterialApp(
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => HomeScreen());

      case '/details':
        final id = settings.arguments as int;
        return MaterialPageRoute(
          builder: (_) => DetailsScreen(id: id),
        );

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

Navigate #

Navigator.pushNamed(
  context,
  '/details',
  arguments: 10,
);

---

Replace & Clear Routes #

Replace Current Route #

Navigator.pushReplacementNamed(context, '/home');

Clear Stack (Auth Flow) #

Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

---

Best Practices for Named Routes #

1. Use Constants for Route Names #

class AppRoutes {
  static const home = '/';
  static const login = '/login';
  static const profile = '/profile';
}

Navigator.pushNamed(context, AppRoutes.profile);

---

2. Centralize Route Logic #

Use onGenerateRoute instead of routes for scalability.

---

3. Avoid Magic Strings #

Never hardcode route strings across the app.

---

Limitations of Named Routes #

• No type safety
• Weak deep-link support
• Hard to manage complex flows
• Not ideal for Flutter Web

---

Named Routes vs go_router #

Feature	Named Routes	go_router
Type Safety	No	Yes
Deep Linking	Weak	Strong
Boilerplate	Low	Medium
Web Friendly	Limited	Excellent

---

When to Use Named Routes #

Use named routes when:

• App is small or medium
• Mobile-only app
• You want simple navigation
• Learning Flutter navigation

Avoid when:

• App needs deep linking
• Flutter Web project
• Complex navigation state

---

Summary #

Named routes are a clean and simple navigation method built on Navigator 1.0. They are excellent for beginners and structured mobile apps but not recommended for complex or web-based navigation.