Flutter Get Dialog 嵌套路由跳转指南：告别异常

2024-02-14 00:19:16

在 Flutter 中的 Dialog 中使用 Get 插件进行无缝路由跳转

概述

在 Flutter 中，Get 插件是一个流行的工具，用于管理路由和状态管理。在 Dialog 弹窗中使用 Get 时，可能会遇到二次跳转路由的问题。本文将探讨这个问题，并提供一个全面的解决方案，让你在 Flutter 应用中实现 Dialog 中的无缝路由跳转。

问题

在 Dialog 弹窗中使用 Get 插件进行路由跳转时，可能会遇到以下异常：

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞══════════════════════════════════════════════════════
The following assertion was thrown building Builder:
Cannot push a new route while a transition was already started (consider using pushReplacement instead).

The relevant error-causing widget was: 
  Builder file:///Users/username/flutter_project/lib/main.dart:30:28
When the exception was thrown, this was the stack: 
#0      Route.push (package:flutter/src/widgets/navigator.dart:2337:12)
#1      GetMaterialPageRoute.buildTransitions (package:get/src/get_material_page_route.dart:53:34)
#2      GetMaterialPageRoute.buildPage (package:get/src/get_material_page_route.dart:69:25)
#3      GetMaterialPageRoute.build (package:get/src/get_material_page_route.dart:83:22)
#4      GetNavigator.pushNamed (package:get/src/get_navigation.dart:322:42)
#5      MainScreen.build (package:flutter_project/main.dart:30:28)
#6      StatefulElement.build (package:flutter/src/widgets/framework.dart:4844:27)

问题原因

此异常是由 Flutter 在路由转换期间尝试再次推送新路由引起的。当你在 Dialog 弹窗中使用 Get 进行路由跳转时，如果在之前的路由转换完成之前再次尝试跳转，则会出现此异常。

解决方案

为了解决此问题，我们需要调整在 Dialog 弹窗中进行路由跳转的方式。以下步骤将指导你实现无缝的 Dialog 路由跳转：

1. 使用 GetX 控制器管理 Dialog 状态

创建 GetX 控制器来管理 Dialog 的状态，包括是否显示 Dialog 以及路由跳转。

2. 监听 Dialog 状态变化

在 GetX 控制器中，监听 Dialog 状态变化并根据需要触发路由跳转。

3. 使用 Get.offNamedUntil 替换 Get.to

在 Dialog 中进行路由跳转时，使用 Get.offNamedUntil 替代 Get.to。这将确保在跳转到新路由之前关闭当前路由。

4. 使用 predicate 过滤路由

使用 predicate 参数将路由跳转限制为只有在当前 Dialog 状态允许的情况下才能进行。

示例代码

以下示例代码演示了如何在 Flutter 中使用 Get 插件在 Dialog 弹窗中实现无缝路由跳转：

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

class DialogController extends GetxController {
  var isDialogOpen = false.obs;

  void openDialog() {
    isDialogOpen.value = true;
  }

  void closeDialog() {
    isDialogOpen.value = false;
  }
}

class MainScreen extends StatelessWidget {
  final DialogController controller = Get.put(DialogController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                controller.openDialog();
              },
              child: Text('Open Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

class CustomDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('Custom Dialog'),
      content: Text('This is a custom dialog.'),
      actions: [
        ElevatedButton(
          onPressed: () {
            Get.offNamedUntil('/new-route', (route) => false);
            Get.find<DialogController>().closeDialog();
          },
          child: Text('Go to New Route'),
        ),
        ElevatedButton(
          onPressed: () {
            Get.find<DialogController>().closeDialog();
          },
          child: Text('Close Dialog'),
        ),
      ],
    );
  }
}