Flutter嵌套导航场景下Android系统返回按钮处理问题

问题详情 #

• 应用结构：通过多个MaterialApp实现带不同主题色的“子应用”，为子应用内所有页面统一应用主题
• 异常表现：
  • 子应用内AppBar的返回按钮可正常导航回子应用上一页
  • Android系统返回按钮直接跳转到根应用，跳过子应用内的页面栈
  • 开启iosPageTransition=true后，iOS侧滑返回手势也出现同样问题
• 预期导航路径：B3→B2→B1→A3→A2→A1
• 实际导航路径：B3→A3→A2→A1
• 补充：尝试过WillPopScope但无效，系统返回按钮不会触发它

复现代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(_AppA(_PageA(1)));
}

class _ColoredApp extends StatelessWidget {
  final Color color;
  final Widget home;
  final iosPageTransition = false;
  _ColoredApp(this.color, this.home);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.light(primary: color),
        pageTransitionsTheme: iosPageTransition
            ? PageTransitionsTheme(
                builders: Map.fromIterable(
                  TargetPlatform.values,
                  value: (_) => const CupertinoPageTransitionsBuilder(),
                ),
              )
            : null,
      ),
      home: home,
    );
  }
}

class _AppA extends _ColoredApp {
  _AppA(Widget home) : super(Colors.red, home);
}

class _AppB extends _ColoredApp {
  _AppB(Widget home) : super(Colors.green, home);
}

class _PageA extends StatelessWidget {
  final int number;
  const _PageA(this.number);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('A$number')),
      body: Center(
        child: ElevatedButton(
          child: Text('Next'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              if (number > 2) return _AppB(_PageB(1));
              return _PageA(number + 1);
            }));
          },
        ),
      ),
    );
  }
}

class _PageB extends StatelessWidget {
  final int number;
  const _PageB(this.number);

  @override
  Widget build(BuildContext context) {
    var scaffold = Scaffold(
      appBar: AppBar(
        leading: number == 1 ? BackButton(onPressed: () => Navigator.of(context, rootNavigator: true).pop()) : null,
        title: Text('B$number'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Next'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return _PageB(number + 1);
            }));
          },
        ),
      ),
    );
    return scaffold;
  }
}

解决方案 #

问题根源是每个MaterialApp都会创建独立的Navigator栈，系统返回按钮默认只与根Navigator交互。当你把整个_AppB（一个MaterialApp）push到根Navigator时，子应用内的_PageB页面其实是在_AppB自己的Navigator栈中，系统返回会直接pop掉整个_AppB，而非子栈内的页面。

方案1：单根MaterialApp + Theme包裹（推荐） #

移除多MaterialApp设计，用一个根MaterialApp，在需要切换主题的页面栈外层用Theme组件包裹，这样所有页面都在同一个根Navigator栈中，系统返回和侧滑返回都会正常工作：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      home: const _PageA(1),
    );
  }
}

class _PageA extends StatelessWidget {
  final int number;
  const _PageA(this.number);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(colorScheme: const ColorScheme.light(primary: Colors.red)),
      child: Scaffold(
        appBar: AppBar(title: Text('A$number')),
        body: Center(
          child: ElevatedButton(
            child: const Text('Next'),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                if (number > 2) {
                  // 用Theme包裹B系列页面，统一应用绿色主题
                  return Theme(
                    data: ThemeData(colorScheme: const ColorScheme.light(primary: Colors.green)),
                    child: const _PageB(1),
                  );
                }
                return _PageA(number + 1);
              }));
            },
          ),
        ),
      ),
    );
  }
}

class _PageB extends StatelessWidget {
  final int number;
  const _PageB(this.number);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('B$number'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Next'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              // 保持主题延续
              return Theme(
                data: Theme.of(context),
                child: _PageB(number + 1),
              );
            }));
          },
        ),
      ),
    );
  }
}

方案2：嵌套Navigator + 处理系统返回 #

如果必须保留类似子应用的结构，可以使用嵌套Navigator，同时通过WillPopScope监听系统返回事件，优先处理子Navigator的栈：

import 'package:flutter/material.dart';

void main() {
  runApp(const _AppA(_PageA(1)));
}

class _ColoredApp extends StatelessWidget {
  final Color color;
  final Widget home;
  final bool iosPageTransition = false;
  _ColoredApp(this.color, this.home);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.light(primary: color),
        pageTransitionsTheme: iosPageTransition
            ? PageTransitionsTheme(
                builders: Map.fromIterable(
                  TargetPlatform.values,
                  value: (_) => const CupertinoPageTransitionsBuilder(),
                ),
              )
            : null,
      ),
      home: home,
    );
  }
}

class _AppA extends _ColoredApp {
  const _AppA(Widget home) : super(Colors.red, home);
}

class _AppB extends StatelessWidget {
  final Widget home;
  const _AppB(this.home);

  @override
  Widget build(BuildContext context) {
    // 嵌套Navigator
    return WillPopScope(
      onWillPop: () async {
        final nestedNavigator = Navigator.of(context);
        if (nestedNavigator.canPop()) {
          nestedNavigator.pop();
          return false; // 阻止根Navigator处理返回
        }
        return true; // 子栈为空时，交给根Navigator处理
      },
      child: Navigator(
        onGenerateRoute: (settings) {
          return MaterialPageRoute(builder: (context) {
            return Theme(
              data: ThemeData(colorScheme: const ColorScheme.light(primary: Colors.green)),
              child: home,
            );
          });
        },
      ),
    );
  }
}

class _PageA extends StatelessWidget {
  final int number;
  const _PageA(this.number);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('A$number')),
      body: Center(
        child: ElevatedButton(
          child: const Text('Next'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              if (number > 2) return const _AppB(_PageB(1));
              return _PageA(number + 1);
            }));
          },
        ),
      ),
    );
  }
}

class _PageB extends StatelessWidget {
  final int number;
  const _PageB(this.number);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('B$number'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Next'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return _PageB(number + 1);
            }));
          },
        ),
      ),
    );
  }
}

说明 #

• 方案1更符合Flutter的设计规范，避免多MaterialApp带来的Navigator栈隔离问题
• 方案2适合需要保留独立子导航栈的场景，但需要额外处理系统返回逻辑

内容的提问来源于stack exchange，提问作者Patrick