Reputation: 2734
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)
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)),
],
))),
),
)
])),
Upvotes: 0
Views: 87
Reputation: 1624
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),
],
),
),
));
Upvotes: 1