Блог

Вероятно, это не лучший заголовок вопроса, но я хотел бы получить некоторые отзывы о том, можно ли/нужно ли упростить мой макет.

Я хочу получить следующий макет в Flutter (см. Изображение)

• в контейнере (светло-зеленый)
• Мне нужна центральная строка с центром (темно-зеленая), содержащая 80% ширины и 20% высоты
• строка содержит три разнесенных элемента (красный, синий и оранжевый).
• красный содержит контейнер 80% с красным центром

Следующий код работает, но кажется довольно сложным. Существуют ли более элегантные способы добиться того же самого?

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

Это не так уж много изменений, но это нечто более простое:

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