为 flutter web 和移动端构建响应式页面

Question

我想为 flutter web 和移动部分构建相同的页面，为了响应性设计，我正在使用 sizer 包 https://pub.dev/packages/sizer。但是这个设计对于网页部分来说太大了，对于移动部分来说看起来很完美。

请指导我如何为移动设备和网络构建相同的页面设计。

详情请参考下方GitHub link https://github.com/TechnoUrmish/Sizer/issues/38

Answer 1

您必须创建两种布局，一种用于网络，一种用于移动设备，并根据您的应用程序的屏幕大小运行决定展示布局这是执行此操作所需的代码示例：

Scaffold(body: new LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if(constraints.maxWidth > 1080 || constraints.maxHeight > 1920) {
            return "DesktopLayout"
          } else {
              return "MobileLayout"
          }
        }
    ),  )

为 flutter web 和移动端构建响应式页面

Build Responsive page for flutter web and mobile

responsive-design

flutter

flutter-layout