I want to give equal spacing to all rows in Flutter App. is there anything like weights or any such widget which can be used. For example, I have 2 Row elements in my app. I want both elements to take equal/half width of the screen.


Solution 1: Bostrot

While you can use the AspectRatio class to evenly manage your widgets it would make more sense to your needs to just align the widgets evenly in a row. Both rows and columns have a mainAxisAlignment and crossAxisAlignment class.

Just wrap the widgets you want to space evenly in a Column and set it:

Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly ... )

You can also use spaceBetween and spaceAround like given here.


Solution 2: Richard Heap

Inside a Flex (i.e. Row or Column), Expanded consumes the remaining available space. If you put two Expandeds in the same Flex they share the remaining available space equally (by default).

You assign 'weights' to Expandeds with their flex parameter, which would allow you to, say, have them share the remaining space 60/40, instead of 50/50, etc.


Solution 3: Andrew

Flexible is your friend

Example with the Row:

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Flexible(
        flex: 5,
        child: SomeFirstWidget(),
      ),
      Flexible(
        flex: 2,
        child: SomeSecondWidget(),
    ],
)

The flex param is the weight.