如何在 Flutter 中设置宽度响应？答案

【问题标题】：How to set width responsive in Flutter?如何在 Flutter 中设置宽度响应？
【发布时间】：2021-12-02 10:05:38
【问题描述】：

我正在设计为 Flutter 中的响应式。我想处理宽度自动，100%，我该怎么做？我已经处理了 double.infinity。

Widget _bottomSubText(subtext) {
return Container(
  padding: const EdgeInsets.only(top: 15),
  width: 977,
  height: 70,
  decoration: BoxDecoration(
    color: const Color.fromARGB(255, 245, 245, 245),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 3,
        blurRadius: 7,
        offset: const Offset(0, 3),
      )
    ],
  ),
  child: Text(
    subtext,
    textAlign: TextAlign.center,
    style: const TextStyle(fontSize: 30),
  ),
);

}

【问题讨论】：

您可以同时使用 double.infinity 和 mediaQuery 宽度。

标签： flutter user-interface mobile width user-experience

【解决方案1】：

通过 Widget 调用包装您的 Container（扩展）

https://api.flutter.dev/flutter/widgets/Expanded-class.html

【讨论】：

【解决方案2】：

在你的容器中使用width: MediaQuery.of(context).size.width。

Widget _bottomSubText(subtext) {
return Container(
  padding: const EdgeInsets.only(top: 15),
//Set this width, if you want to half of screen multiplied it by 0.5 and so on...
  width: MediaQuery.of(context).size.width,
  height: 70,
  decoration: BoxDecoration(
    color: const Color.fromARGB(255, 245, 245, 245),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 3,
        blurRadius: 7,
        offset: const Offset(0, 3),
      )
    ],
  ),
  child: Text(
    subtext,
    textAlign: TextAlign.center,
    style: const TextStyle(fontSize: 30),
  ),
);
}

【讨论】：