GoRouter package in Flutter - Mini App: Build & Ship

Build: Simple Navigation with GoRouter

This screen demonstrates basic navigation between two pages using the GoRouter package in Flutter. The user can navigate from HomePage to DetailsPage and back.

Target UI

HomePage
+---------------------+
| Welcome to HomePage |
|                     |
| [Go to Details]     |
+---------------------+

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

Use GoRouter for navigation

HomePage with a button labeled 'Go to Details' that navigates to DetailsPage

DetailsPage with a button labeled 'Back to Home' that navigates back to HomePage

Use MaterialApp.router with GoRouter configuration

Starter Code

Flutter

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: Initialize GoRouter and return MaterialApp.router
    return MaterialApp();
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HomePage')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // TODO: Navigate to DetailsPage
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('DetailsPage')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // TODO: Navigate back to HomePage
          },
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

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

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

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/details',
      builder: (context, state) => DetailsPage(),
    ),
  ],
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
      title: 'GoRouter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HomePage')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.go('/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('DetailsPage')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.go('/');
          },
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

We created a GoRouter instance with two routes: '/' for HomePage and '/details' for DetailsPage. The MaterialApp.router uses this router configuration to handle navigation.

In HomePage, pressing the button calls context.go('/details') to navigate to the details page. In DetailsPage, pressing the button calls context.go('/') to go back to the home page.

This setup uses GoRouter's simple API to manage navigation declaratively and cleanly.

Final Result

Completed Screen

HomePage
+---------------------+
| Welcome to HomePage |
|                     |
| [Go to Details]     |
+---------------------+

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

Tap 'Go to Details' button on HomePage navigates to DetailsPage

Tap 'Back to Home' button on DetailsPage navigates back to HomePage

Stretch Goal

Add a third page called AboutPage accessible from HomePage with a button labeled 'About'.

💡 Hint

Add a new route '/about' in GoRouter and a button in HomePage that calls context.go('/about'). Create AboutPage widget with a back button.