如何根据不同的屏幕大小使Flutter Web抽屉具有响应性？

Question

我正在使用 Flutter Web 制作一个带有抽屉（Drawer）的管理后台，但是当我尝试在手机上访问时，抽屉无法呈现响应式的效果...请问我该如何将抽屉以图标列表的形式展示在移动端？

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());
                      },
                    ),
                  ],
                );
            ),
          ],
        ),
      ),

这是笔记本电脑上的显示抽屉 这是移动设备上的显示抽屉 两者没有任何区别。'

- OceanL

---

可能是在Flutter Web上制作响应式网站的重复问题。 - dazza5000

如果我使用那个，我有点困惑如何将其实现到小部件中。 - OceanL

尝试使用这个插件 https://pub.dev/packages/responsive_scaffold。我发现它很容易使用。 - Tushar Pol

Answer 1

你可以使用LayoutBuilder来确定页面的屏幕尺寸，并根据父元素的尺寸更新子部件。查看此类似的 Stack Overflow 帖子以获取示例。

- Omatt