响应式设计 Flutter

【问题标题】：Responsive Design Flutter响应式设计 Flutter
【发布时间】：2021-06-17 09:02:57
【问题描述】：

我正在尝试学习 Flutter，并且正在尝试开发应用程序。我在响应式设计方面遇到问题。我想将按钮并排放置并在它们之间留出空间，但是当屏幕尺寸发生变化时，行设计会崩溃.我不想为每个不同的尺寸做不同的设计。我想通过自动响应来使其适合高度和宽度。我该怎么做？谢谢解答

【问题讨论】：

你能展示一下崩溃的代码吗？

标签： android flutter responsive-design flutter-layout

【解决方案1】：

对于响应式设计，请使用 Mediaquery 类，该类将根据设备的屏幕尺寸进行调整。

MediaQueryData queryData;
queryData = MediaQuery.of(context);

获取设备屏幕的宽度和高度：

queryData.size.width
queryData.size.height

或者你可以使用sizer插件来简单地跟随：sizer

为不同屏幕尺寸制作响应式 UI 的最简单方法是 Sizer 插件。

【讨论】：

【解决方案2】：

您可以使用Flexible 小部件。

Row(children:[
  Flexible(
    flex:2, // This button will be twice as big as the other one
    ElevatedButton(
      onPressed:(){},
      child:Text("Button1"),
    )
  ),
  
  SizedBox(width: 50),
  
  Flexible(
    flex:1,
    ElevatedButton(
      onPressed:(){},
      child:Text("Button2"),
    )
  ),
])

https://www.youtube.com/watch?v=CI7x0mAZiY0

【讨论】：