How to navigate between two Pages using the Drawer?

Question

I'm fairly new to Flutter, and I'm trying to get some simple functionality working, but I'm having trouble.

I want to be able to navigate between two pages using the Drawer. I am able to navigate from the home page to a second screen, but I am not able to navigate back.

The app starts on the firstPage. When I open the Drawer, I click on the "Second" option. This navigates the app to the secondPage. But once on the secondPage, if I open the Drawer again and click on "First", I am not navigated back to the firstPage.

I have created a small app that demonstrates this:

import 'package:flutter/material.dart';

import 'package:routemaster/routemaster.dart';


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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: RoutemasterDelegate(routesBuilder: (context) => routes),
      routeInformationParser: const RoutemasterParser(),
    );
  }
}


final routes = RouteMap(
  routes: {
    '/':(route) => const MaterialPage(
      key: ValueKey('first'),
      child: firstPage,
    ),
    '/second':(route) => const MaterialPage(
      key: ValueKey('second'),
      child: secondPage,
    ),
  },
);


const firstPage = AppPage(
  title: Text('First'),
  body: Text('First'),
  color: Colors.purple
);


const secondPage = AppPage(
  title: Text('Second'),
  body: Text('Second'),
  color: Colors.green
);


class AppPage extends StatelessWidget {
  final Text title;
  final Text body;
  final Color color;

  const AppPage({
    super.key,
    required this.title,
    required this.body,
    required this.color
  });

  @override
  Widget build (BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [
            ListTile(
              title: const Text('First'),
              onTap: () => Routemaster.of(context).push('/'),
            ),
            ListTile(
              title: const Text('Second'),
              onTap: () => Routemaster.of(context).push('/second'),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: title,
      ),
      body: Container(
        decoration: BoxDecoration(color: color),
        child: Center(child: body),
      ),
    );
  }
}

I also created a pastebin link: https://pastebin.com/PRYtwSeU in case that's easier.

When I click on the "First" item in the navigation Drawer, I should be taken to the firstPage page.

When I click on the "Second" item in the navigation Drawer, I should be taken to the secondPage page.

I've tried using Navigator.pop() and Routemaster.of(context).pop(), but neither works.

Can someone help me understand how to fix this, so I am able to navigate between the two pages using the Drawer?

Answer 1

To navigate back to the first page, you can use popUntil:

onTap: () => Routemaster.of(context).popUntil(
                (route) => route.path == '/first',
              ),

Using your example:

import 'package:flutter/material.dart';

import 'package:routemaster/routemaster.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: RoutemasterDelegate(routesBuilder: (context) => routes),
      routeInformationParser: const RoutemasterParser(),
    );
  }
}

final routes = RouteMap(
  routes: {
    '/': (route) => const MaterialPage(
          key: ValueKey('first'),
          child: firstPage,
        ),
    '/second': (route) => const MaterialPage(
          key: ValueKey('second'),
          child: secondPage,
        ),
  },
);

const firstPage =
    AppPage(title: Text('First'), body: Text('First'), color: Colors.purple);

const secondPage =
    AppPage(title: Text('Second'), body: Text('Second'), color: Colors.green);

class AppPage extends StatelessWidget {
  final Text title;
  final Text body;
  final Color color;

  const AppPage(
      {super.key,
      required this.title,
      required this.body,
      required this.color});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [
            ListTile(
              title: const Text('First'),
              onTap: () => Routemaster.of(context).popUntil(
                //direction from right to left
                (route) => route.path == '/first',
              ),
            ),
            ListTile(
              title: const Text('Second'),
              onTap: () => Routemaster.of(context).push('/second'),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: title,
      ),
      body: Container(
        decoration: BoxDecoration(color: color),
        child: Center(child: body),
      ),
    );
  }
}