Flutter嵌套导航Dialog动态尺寸调整失效问题求助

问题核心在于默认Dialog组件的尺寸会在首次构建时固定，嵌套的Navigator内部页面切换不会触发Dialog重新计算布局，导致尺寸无法随页面内容更新。以下是两种可行的解决方案：

方案一：使用showGeneralDialog自定义弹窗（推荐） #

showGeneralDialog比默认showDialog更灵活，可动态控制弹窗约束。通过监听嵌套Navigator的路由变化，实时更新弹窗尺寸：

修改主页面弹窗调用 #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showGeneralDialog(
              context: context,
              barrierDismissible: true,
              barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
              barrierColor: Colors.black54,
              transitionDuration: const Duration(milliseconds: 200),
              pageBuilder: (context, animation, secondaryAnimation) {
                return const MainDialog();
              },
            );
          },
          child: const Text('Show Dialog'),
        ),
      ),
    );
  }
}

修改MainDialog组件 #

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

  @override
  State<MainDialog> createState() => _MainDialogState();
}

class _MainDialogState extends State<MainDialog> with RouteAware {
  final navigatorKey = GlobalKey<NavigatorState>();
  final routeObserver = RouteObserver<ModalRoute<void>>();
  Size currentSize = const Size(300, 200); // 默认初始尺寸

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPush(Route route, Route? previousRoute) {
    super.didPush(route, previousRoute);
    // 路由切换后更新尺寸
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        currentSize = switch(route.settings.name) {
          'large' => const Size(600, 800),
          'small' => const Size(150, 200),
          _ => const Size(300, 200),
        };
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        width: currentSize.width,
        height: currentSize.height,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Navigator(
          key: navigatorKey,
          observers: [routeObserver],
          onGenerateRoute: (settings) {
            if (settings.name == 'large') {
              return MaterialPageRoute(
                settings: const RouteSettings(name: 'large'),
                builder: (context) => const LargePage(),
              );
            } else if (settings.name == 'small') {
              return MaterialPageRoute(
                settings: const RouteSettings(name: 'small'),
                builder: (context) => const SmallPage(),
              );
            }
            return MaterialPageRoute(
              settings: const RouteSettings(name: 'home'),
              builder: (context) => Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () => Navigator.of(context).pushNamed('large'),
                    child: const Text('Large Page'),
                  ),
                  ElevatedButton(
                    onPressed: () => Navigator.of(context).pushNamed('small'),
                    child: const Text('Small Page'),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

方案说明 #

• 用AnimatedContainer包裹嵌套Navigator，实现尺寸变化的平滑过渡
• 通过RouteObserver监听路由切换事件，在didPush回调中更新当前页面尺寸
• 使用pushNamed替代直接push，便于路由监听时识别页面类型

方案二：给默认Dialog添加动态约束 #

若坚持使用默认Dialog组件，可通过ValueNotifier和ValueListenableBuilder动态传递尺寸：

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

  @override
  State<MainDialog> createState() => _MainDialogState();
}

class _MainDialogState extends State<MainDialog> {
  final navigatorKey = GlobalKey<NavigatorState>();
  final _pageSize = ValueNotifier(const Size(300, 200));

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: ValueListenableBuilder<Size>(
        valueListenable: _pageSize,
        builder: (context, size, child) {
          return SizedBox(width: size.width, height: size.height, child: child);
        },
        child: Navigator(
          key: navigatorKey,
          onGenerateRoute: (settings) {
            if (settings.name == 'large') {
              return MaterialPageRoute(
                builder: (context) {
                  WidgetsBinding.instance.addPostFrameCallback((_) {
                    _pageSize.value = const Size(600, 800);
                  });
                  return const LargePage();
                },
              );
            } else if (settings.name == 'small') {
              return MaterialPageRoute(
                builder: (context) {
                  WidgetsBinding.instance.addPostFrameCallback((_) {
                    _pageSize.value = const Size(150, 200);
                  });
                  return const SmallPage();
                },
              );
            }
            return MaterialPageRoute(
              builder: (context) {
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  _pageSize.value = const Size(300, 200);
                });
                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: () => Navigator.of(context).pushNamed('large'),
                      child: const Text('Large Page'),
                    ),
                    ElevatedButton(
                      onPressed: () => Navigator.of(context).pushNamed('small'),
                      child: const Text('Small Page'),
                    ),
                  ],
                );
              },
            );
          },
        ),
      ),
    );
  }
}

方案说明 #

• 使用ValueNotifier存储当前页面尺寸，ValueListenableBuilder监听尺寸变化并更新Dialog子组件大小
• 在每个页面的builder中，通过addPostFrameCallback确保页面构建完成后再更新尺寸

两种方案均可解决Dialog无法动态调整尺寸的问题，方案一更灵活，推荐优先使用。

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