Мне нужна помощь в создании адаптивного макета. Вот что я пытаюсь достичь:
https://imgur.com/a/kQvLCiZ
В настоящее время я использую контрольные точки для обозначения основных изменений экрана, и в этом случае макеты A и B в пределах диапазона точек останова рабочего стола. Точка останова рабочего стола начинается с 1024.
Макет A - это максимальный размер полей (отмечен красным), а синие прямоугольники должны быть, когда ширина экрана составляет 1920 или больше, чем. Макет B - это минимальный размер полей, и синие поля должны быть, когда ширина экрана равна 1024.
До сих пор я пытался использовать комбинацию гибких и рамочных ограничений. Проблема в том, что я не могу получить точные измерения желаемых минимальных значений макета B. Либо я компрометирую размер синих полей или полей.
Вот код того, что у меня есть:
Container(
height: height,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
fit: FlexFit.loose,
flex: 5,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
Flexible(
fit: FlexFit.loose,
flex: 1,
child: FractionallySizedBox(
widthFactor: 0.6,
child: Container(
width: 64,
))),
Flexible(
fit: FlexFit.loose,
flex: 5,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
Flexible(
fit: FlexFit.loose,
flex: 1,
child: FractionallySizedBox(
widthFactor: 0.6,
child: Container(
width: 64,
))),
Flexible(
fit: FlexFit.loose,
flex: 5,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
],
),
SizedBox(height: 96),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Spacer(flex: 6),
Flexible(
fit: FlexFit.loose,
flex: 9,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
Flexible(
flex: 1,
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: 24, maxWidth: 64),
child: Container())),
Flexible(
fit: FlexFit.loose,
flex: 9,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
Spacer(flex: 6),
],
)
],
),
);