Named routes in Flutter - Mini App: Build & Ship

Build: Named Routes Demo

A simple Flutter app demonstrating navigation using named routes between two screens.

Target UI

Home Screen
+---------------------+
|                     |
|   Welcome Home!      |
|                     |
| [Go to Details]      |
+---------------------+

Details Screen
+---------------------+
|                     |
|   Details Page       |
|                     |
| [Back to Home]       |
+---------------------+

Use named routes for navigation.

Create two screens: HomeScreen and DetailsScreen.

HomeScreen has a button labeled 'Go to Details' that navigates to DetailsScreen.

DetailsScreen has a button labeled 'Back to Home' that navigates back to HomeScreen.

Define routes in MaterialApp's routes property.

Starter Code

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Demo',
      // TODO: Define routes here
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // TODO: Navigate to DetailsScreen using named route
          },
          child: const Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  const DetailsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // TODO: Navigate back to HomeScreen using named route
          },
          child: const Text('Back to Home'),
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Demo',
      initialRoute: '/home',
      routes: {
        '/home': (context) => const HomeScreen(),
        '/details': (context) => const DetailsScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

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

class DetailsScreen extends StatelessWidget {
  const DetailsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/home');
          },
          child: const Text('Back to Home'),
        ),
      ),
    );
  }
}

This Flutter app uses named routes to navigate between two screens: HomeScreen and DetailsScreen.

In MaterialApp, we define the routes map with keys '/home' and '/details' pointing to their respective screen widgets.

The initialRoute is set to '/home' so the app starts on the HomeScreen.

On HomeScreen, pressing the button calls Navigator.pushNamed(context, '/details') to go to DetailsScreen.

On DetailsScreen, pressing the button calls Navigator.pushNamed(context, '/home') to go back to HomeScreen.

This approach keeps navigation organized and easy to manage, especially as apps grow larger.

Final Result

Completed Screen

Home Screen
+---------------------+
|                     |
|   Welcome Home!      |
|                     |
| [Go to Details]      |
+---------------------+

Details Screen
+---------------------+
|                     |
|   Details Page       |
|                     |
| [Back to Home]       |
+---------------------+

Tap 'Go to Details' button on Home Screen navigates to Details Screen.

Tap 'Back to Home' button on Details Screen navigates back to Home Screen.

Stretch Goal

Add a third screen named 'AboutScreen' accessible from HomeScreen using a named route '/about'.

💡 Hint

Define '/about' in routes and add a button on HomeScreen that calls Navigator.pushNamed(context, '/about').