Flutter技术问题：如何重置Flutter Engine上的导航栈？

问题场景 #

在原生iOS应用中集成Flutter模块并使用共享Flutter Engine时，多次展示FlutterViewController会发现Flutter的导航栈被保留——比如之前进入过详情页，再次打开Flutter页面时会直接显示详情页而非着陆页，需要实现每次打开Flutter页面时将导航栈重置到初始状态。

示例代码 #

Dart代码 #

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: 'example',
      routes: {
        'example': (context) => const LandingPage(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Landing screen')),
      body: Center(
        child: TextButton(
          child: const Text('Go to details'),
          onPressed: () => _navigateToDetails(context),
        ),
      ),
    );
  }

  void _navigateToDetails(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => const DetailsPage()),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details screen')),
      body: const Center(child: Text('Details')),
    );
  }
}

Swift代码 #

@main
class AppDelegate: FlutterAppDelegate {
    
    lazy var sharedEngine = FlutterEngine(name: "shared")

    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        sharedEngine.run();
        GeneratedPluginRegistrant.register(with: sharedEngine);
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

class ViewController: UIViewController {

    @IBAction private func onButtonTapped(_ sender: UIButton) {
        let page = FlutterViewController(
            engine: AppDelegate.current.sharedEngine,
            nibName: nil,
            bundle: nil
        )
        present(page, animated: true)
    }
}

解决方案 #

方法一：通过MethodChannel从原生端触发重置（推荐） #

通过原生与Flutter的通信机制，在每次展示FlutterViewController前通知Flutter重置导航栈：

1. Flutter端修改
   添加MethodChannel监听，收到指令后将导航栈清空并回到初始路由：

   class ExampleApp extends StatelessWidget {
     const ExampleApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       // 初始化通信通道
       const navigationChannel = MethodChannel('com.example/nav_reset');
       navigationChannel.setMethodCallHandler((call) async {
         if (call.method == 'resetToRoot') {
           // 清空所有页面，回到初始路由
           Navigator.of(context).pushNamedAndRemoveUntil(
             'example',
             (route) => false,
           );
         }
         return null;
       });
   
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(primarySwatch: Colors.blue),
         initialRoute: 'example',
         routes: {'example': (context) => const LandingPage()},
       );
     }
   }
   

2. iOS原生端修改
   在创建FlutterViewController前，通过MethodChannel发送重置指令：

   @IBAction private func onButtonTapped(_ sender: UIButton) {
       let engine = AppDelegate.current.sharedEngine
       // 创建通信通道
       let channel = FlutterMethodChannel(name: "com.example/nav_reset", binaryMessenger: engine.binaryMessenger)
       // 发送重置指令
       channel.invokeMethod("resetToRoot", arguments: nil)
       
       let flutterVC = FlutterViewController(engine: engine, nibName: nil, bundle: nil)
       present(flutterVC, animated: true)
   }
   

方法二：Flutter端监听生命周期自动重置 #

利用Flutter的生命周期监听，在页面回到前台时自动重置导航栈：

class LandingPage extends StatefulWidget {
  const LandingPage({super.key});

  @override
  State<LandingPage> createState() => _LandingPageState();
}

class _LandingPageState extends State<LandingPage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 当页面从后台回到前台时重置导航栈
    if (state == AppLifecycleState.resumed) {
      Navigator.of(context).pushNamedAndRemoveUntil(
        'example',
        (route) => false,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Landing screen')),
      body: Center(
        child: TextButton(
          child: const Text('Go to details'),
          onPressed: () => _navigateToDetails(context),
        ),
      ),
    );
  }

  void _navigateToDetails(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => const DetailsPage()),
    );
  }
}

方法三：每次创建新的FlutterEngine（不推荐） #

放弃共享Engine，每次打开Flutter页面时创建全新的Engine，这样导航栈会是初始状态，但会增加内存开销：

@IBAction private func onButtonTapped(_ sender: UIButton) {
    // 生成唯一名称避免重复
    let engine = FlutterEngine(name: "unique_engine_\(UUID().uuidString)")
    engine.run()
    GeneratedPluginRegistrant.register(with: engine)
    
    let flutterVC = FlutterViewController(engine: engine, nibName: nil, bundle: nil)
    present(flutterVC, animated: true)
}

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