How can I make my layout responsive according to design spec?

Question

I need help in making a layout responsive. Here is what I am trying to achieve:

https://i.sstatic.net/Dl5x4.jpg

I am currently using breakpoints to mark major screen changes and in this case, Layout A and B are within the desktop breakpoint range. The desktop breakpoint begins at 1024.

Layout A is the max size of the margins(marked in red) and the blue rectangles need to be when the screen width is 1920 or greater than. Layout B is the minimum size of the margins and the blue boxes need to be when the screen width is 1024.

So far I have tried using a combination of flexible and box constraints. The problem is I cannot get the exact measurements of the desired minimum values of Layout B. Either I compromise the size of the blue boxes or the margins.

Here is the code of what I have so far:

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

You can get the Screen size using MediaQuery, so that you can build your widget according to it.

In below example if screen size is more than 1900 than width will be 352 else width will be 298.67 and same as height. you can also set space between widgets same way.

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