Named Routes in Flutter: solved navigation exercise

2026-02-13 2 minutes

Named Routes in Flutter: solved exercise

If you are looking for named routes in Flutter, this solved exercise gives you a practical implementation pattern you can reuse in real projects.

Problem statement

Build a screen with:

configure two screens
navigate from Home to Detail with route names
return back with pop

Flutter solution

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (_) => const HomePage(),
      '/detail': (_) => const DetailPage(),
    },
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pushNamed(context, '/detail'),
          child: const Text('Ir a detalle'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Detalle')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('Volver'),
        ),
      ),
    );
  }
}

Expected result

Navigation works with a centralized and readable routes definition.

Common mistakes

Mixing route styles without a clear rule.
Duplicating route names.
Ignoring return navigation paths.

Practical use

Useful for apps that need predictable navigation as modules and screens grow.

Recommended next exercise

Guided practice and next step

FAQ

Are named routes enough for most apps?

For many small and medium apps, yes.

Can I pass arguments with named routes?

Yes. Use pushNamed(..., arguments: ...) and read them in the target screen.

Is this still valid in 2026?

Yes. It remains a practical option when simplicity is a priority.