Probably not the best question title but I would like to get some feedback on whether or not my layout could/should be simplified.

I want to get the following layout in Flutter (see image)

• in a Container (light green)
• I want a a centered central row (dark green) containing 80% of the width and 20% of the height
• the row contains three spaced elements (red, blue and orange)
• the red one contains a red centered 80% Container

The following code works but feels pretty complicated. Are there more elegant ways to achieve the same thing?

   Container(
          color: Colors.white,
          child: Column(children: [
            Expanded(
              child: SizedBox.expand(
                child: FractionallySizedBox(
                    widthFactor: 0.8,
                    heightFactor: 0.2,
                    alignment: FractionalOffset.center,
                    child: Container(
                        child: Row(
                          children: [
                            Flexible(
                              flex:2,
                              child: SizedBox.expand(child: Container(
                                  color: Colors.red,
                                child: FractionallySizedBox(
                                  widthFactor: 0.8,
                                  heightFactor: 0.8,
                                    child: Container(color:Colors.yellow),
                                )
                              )
                              ),
                            ),
                            Spacer(),
                            Flexible(flex:2, child: Container(color: Colors.blue)),
                            Spacer(),
                            Flexible(flex:2, child: Container(color: Colors.orange)),
                          ],
                        ))),
              ),
            )
          ])),

CodePudding user response：

It is not much change but it is something simpler:

Size size = MediaQuery.of(context).size;
    return  Container(
        color: Colors.white,
        child: Center(
          child: Container(
            height: size.height * 0.2,
            width: size.width * 0.8,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                    width: size.width * 0.2,
                    color: Colors.red,
                    child: FractionallySizedBox(
                      widthFactor: 0.8,
                      heightFactor: 0.8,
                      child: Container(color: Colors.yellow),
                    )),
                Container( width: size.width * 0.2, color: Colors.blue),
                Container( width: size.width * 0.2, color: Colors.orange),
              ],
            ),
          ),
        ));