Как я могу сделать свой макет адаптивным в соответствии со спецификацией c?

Question

Мне нужна помощь в создании адаптивного макета. Вот что я пытаюсь достичь:

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),
        ],
      )
    ],
  ),
);

Answer 1

Вы можете получить размер экрана с помощью MediaQuery, так что вы можете построить свой виджет в соответствии с ним.

В приведенном ниже примере, если размер экрана больше 1900, ширина будет 352, иначе ширина будет 298,67 и такой же, как высота. Вы также можете установить расстояние между виджетами таким же образом.

@override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final double width = size.width > 1900 ? 352 : 298.67;
    final double height = size.width > 1900 ? 517 : 439;
    return Scaffold(
      body: Container(
        child: Center(
          child: Container(
            width: width,
            height: height,
          ),
        ),
      ),
    );
  }