Flutter: Persistent BottomNavigationBar with proper back navigation not working with PopScope - Stack Overflow

admin管理员组

文章数量:1122832

I'm trying to implement a persistent bottom navigation bar that stays visible across all pages while maintaining proper back navigation. However, I'm encountering issues with the back button behavior.

main.dart

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: GlobalKey<NavigatorState>(),
        initialRoute: '/',
        onGenerateRoute: (settings) {
          Widget page;
          switch (settings.name) {
            case '/':
              page = PopScope(
                canPop: false,
                onPopInvoked: (didPop) {
                  // Handle app exit
                },
                child: const Mainpage(),
              );
              break;
            default:
              page = const Mainpage();
          }
          return MaterialPageRoute(
            builder: (context) => page,
            settings: settings,
          );
        },
      ),
      bottomNavigationBar: Container(
        width: double.infinity,
        height: 50,
        color: Colors.blue,
        child: const Center(
          child: Text('Persistent Bottom Bar'),
        ),
      ),
    );
  }
}

mainpage.dart

import 'package:flutter/material.dart';
import 'package:practice/pages/subpage1.dart';

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          Text('Main Page'),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => Subpage1(),
                ),
              );
            },
            child: Text('Navigate to Sub page 1'),
          ),
        ],
      ),
    );
  }
}

subpage1.dart

import 'package:flutter/material.dart';
import 'package:practice/pages/subpage2.dart';

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

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: true,
      child: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                IconButton(
                  icon: Icon(Icons.arrow_back),
                  onPressed: () => Navigator.of(context).pop(),
                ),
                Text('Sub Page 1'),
              ],
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => Subpage2(),
                  ),
                );
              },
              child: Text('Navigate to Sub page 2'),
            ),
          ],
        ),
      ),
    );
  }
}

subpage2.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: true,
      child: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                IconButton(
                  icon: Icon(Icons.arrow_back),
                  onPressed: () => Navigator.of(context).pop(),
                ),
                Text('Sub Page 2'),
              ],
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).popUntil((route) => route.isFirst);
              },
              child: Text('Navigate to Main page'),
            ),
          ],
        ),
      ),
    );
  }
}

Navigation Structure:

• MainPage → SubPage1 → SubPage2

Current Behavior:

1. The bottom navigation bar is persistent (working as intended)

2. When pressing the back (from Android) on any page, the app instantly closes instead of navigating to the previous screen

3. Manual navigation using buttons works fine

Expected Behavior:

1. Bottom navigation bar should remain persistent

2. Back button should navigate to previous screen in the stack (SubPage2 → SubPage1 → MainPage)

What I've Tried:

1. Using PopScope with different configurations

2. Different Navigator configurations

Can someone help identify what I'm doing wrong with the PopScope implementation or suggest a better approach to handle back navigation while maintaining a persistent bottom bar?

本文标签： Flutter Persistent BottomNavigationBar with proper back navigation not working with PopScopeStack Overflow