Named Routes

Relax. We'll talk through this in plain words — no textbook voice.

Named Routes are a navigation approach where you identify screens by a string name. In a project with only a few pages, a direct MaterialPageRoute is simple enough, but once you have more routes, defining them in one central place — like '/profile', '/settings', '/details' — keeps things much cleaner.

dart

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const HomeScreen(),
    '/details': (context) => const DetailScreen(),
    '/settings': (context) => const SettingsScreen(),
  },
);

// Navigate to settings
Navigator.pushNamed(context, '/settings');

// Go back
Navigator.pop(context);

You should see

Calling Navigator.pushNamed(context, '/settings') brings up the SettingsScreen.

Next Steps

Once navigation is done, read on to the Assets lesson to use images and files in your app.

Easy traps

Calling pushNamed with a name that isn't in your routes map will throw a route-not-found error.