flutter - 如何根据不同的屏幕尺寸使 flutter web drawer 响应？

Question

我正在制作一个带有抽屉的 flutter web 的管理仪表板。但是当我尝试在移动设备上访问它时，抽屉还不能响应......我如何以图标列表的形式访问移动设备上的抽屉？

body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Row(
          children: <Widget>[
             Drawer(
                child: ListView(
                  padding: EdgeInsets.zero,
                  children: <Widget>[
                    DrawerHeader(
                      margin: EdgeInsets.zero,
                      child: Center(
                        child: Image(
                          image: ExactAssetImage("images/image.png"),
                        ),
                      ),
                    ),
                    ListTile(
                      leading: Icon(Icons.location_city),
                      title: Text('Partner'),
                      onTap: () {
                        _setPage(ClientPage());
                      },
                    ),
                    ListTile(
                      leading: Icon(Icons.multiline_chart),
                      title: Text('Proyek'),
                      onTap: () {
                        _setPage(ProyekPage());
                      },
                    ),
                  ],
                );
            ),
          ],
        ),
      ),

笔记本电脑上的这个展示抽屉

这是手机上的展示抽屉

没有区别:'

Answer 1

您可以使用 LayoutBuilder确定页面的屏幕大小并根据父级尺寸更新子级小部件。检查这个similar Stack Overflow post为样本。