Flutter Web环境下Material Design Drawer抽屉不显示问题求助

核心问题定位 #

• 移动端导航栏的汉堡菜单按钮未绑定Drawer弹出逻辑，当前NavigationBarMobile中IconButton的onPressed为空实现，自然无法触发抽屉弹出
• 可同步校验响应式判断逻辑是否生效：可在代码中打印sizingInformation.deviceScreenType取值，确认Chrome浏览器切换到移动端视口时，取值不等于DeviceScreenType.desktop，避免Drawer被直接赋值为null

修复方案 #

方案一：通过GlobalKey控制Scaffold（更稳定，适用于导航栏和Scaffold不在同一context层级的场景） #

1. 给HomeLayout中的Scaffold绑定全局Key，同时将Key透传给NavigationBar组件

import 'package:responsive_builder/responsive_builder.dart';
    
class HomeLayout extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  const HomeLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, sizingInformation) => Scaffold(
        key: _scaffoldKey,
        drawer: sizingInformation.deviceScreenType == DeviceScreenType.desktop
            ? null
            : const NavigationDrawer(),
        backgroundColor: Colors.white,
        body: Center(
          child: Column(
            children: <Widget>[
              NavigationBar(scaffoldKey: _scaffoldKey),
              Expanded(
                child: Navigator(
                  key: locator<NavigationService>().navigatorKey,
                  onGenerateRoute: generateRoute,
                  initialRoute: HomeRoute,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

2. 修改NavigationBar定义，接收Scaffold的Key并透传给移动端导航栏

class NavigationBar extends StatelessWidget {
  final GlobalKey<ScaffoldState> scaffoldKey;
  const NavigationBar({ Key? key, required this.scaffoldKey })  :  super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScreenTypeLayout(
      mobile: NavigationBarMobile(scaffoldKey: scaffoldKey),
      tablet: const NavigationBarTabletDesktop(),
    );
  }
}

3. 补全NavigationBarMobile中汉堡按钮的点击逻辑

class NavigationBarMobile extends StatelessWidget {
  final GlobalKey<ScaffoldState> scaffoldKey;
  const NavigationBarMobile({Key? key, required this.scaffoldKey}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
              child: IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () => scaffoldKey.currentState?.openDrawer(),
          )),
          Expanded(
            child: const NavBarLogo(),
          ),
          const Expanded(
            child: SizedBox.shrink(),
          ),
        ],
      ),
    );
  }
}

方案二：通过Builder获取Scaffold上下文 #

如果不想透传Key，可直接用Builder组件包裹汉堡按钮，获取包含Scaffold的上下文触发弹出：

class NavigationBarMobile extends StatelessWidget {
  const NavigationBarMobile({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Builder(
              builder: (context) => IconButton(
                icon: const Icon(Icons.menu),
                onPressed: () => Scaffold.of(context).openDrawer(),
              ),
            )
          ),
          Expanded(
            child: const NavBarLogo(),
          ),
          const Expanded(
            child: SizedBox.shrink(),
          ),
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Fi Li Ppo