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

Question

enter image description here

我正在设计 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),
  ),
);

}

Answer 1

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

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

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