在浏览器中更改窗口大小时，是否可以使布局从"行"布局自动调整为"列"布局

Question

我正在尝试创建一个flutter web应用程序。我已经创建了一个包含3个TextFormFields的Row with Form。我的要求是：如果我将网页的窗口大小从大改为小，则TextFormFields应被视为列布局，如果我将大小从小改为大，则TextFormFields应视为行布局。有时我会使用超过3的TextFormFields。如果可能的话，怎么做。或者如果有其他想法，请告诉我。或者让我知道，如果有其他小部件，而不是那一行和那一列。我的示例代码行：

SingleChildScrollView(
child: Row(
children: [
Form(
key: _formkey,
child: Align(
alignment: Alignment.topCenter,
child: Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
ConstrainedBox(
constraints:
const BoxConstraints(maxWidth: 400),
child: TextFormField(
readOnly: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
filled: true,
labelText: '1',
),
),
),
const SizedBox(
width: 10,
),
ConstrainedBox(
constraints:
const BoxConstraints(maxWidth: 400),
child: TextFormField(
readOnly: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
filled: true,
labelText: '2',
),
),
),
const SizedBox(
width: 10,
),
ConstrainedBox(
constraints:
const BoxConstraints(maxWidth: 400),
child: TextFormField(
readOnly: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
filled: true,
labelText: '3',
),
),
),
],
),
),
),
),
),
],
),
),

Answer 1

您可能正在寻找的小部件是OverflowBar小部件。例如，它用于对话框中的按钮。如果没有足够的水平空间，则按钮将按列而不是行排列。

您可以在此处查看其文档：https://api.flutter.dev/flutter/widgets/OverflowBar-class.html

Answer 2

您可以使用MediaQuery来测量设备的高度和宽度，并根据该高度和宽度以百分比形式提供高度和宽度。