I have a column that stretches from the top of my screen to the bottom, inside that column are two rows each with three buttons.
What's the best/proper way to adjust the vertical spacing between these two rows?
Currently I'm using Expanded's with an empty child container to add gaps between children of the column, so I have a 10% 'gap' between the top of the page and the first row and another 10% 'gap' between the two rows
This doesn't feel quite right and I seem to be limited to XX% amounts of padding, I want to try and avoid specific pixel amounts so the layout remains consistent regardless of screen size
Column(
children: <Widget>[
Expanded(flex: 1, child:Container()),
Expanded(flex: 3, child:
Row(children: <Widget>[
Expanded(child: _navButton(Icons.person, "User", ()=>print("User"))),
Expanded(child: _navButton(Icons.insert_drive_file, "Formulation", ()=>print("Formulation"),)),
Expanded(child: _navButton(Icons.lightbulb_outline, "Devices", ()=>print("Devices"),)),
],)),
Expanded(flex: 1, child:Container()),
Expanded(flex: 3, child:
Row(children: <Widget>[
Expanded(flex: 3, child: _navButton(Icons.settings, "Settings", ()=>print("Settings"), iconColour: Colors.blueGrey)),
Expanded(flex: 3, child: _navButton(Icons.camera_alt, "Photos", ()=>print("Photos"),)),
Expanded(flex: 3, child: _navButton(Icons.cancel, "Exit", ()=>print("Exit"), iconColour: Colors.redAccent)),
],
)),
],
)
Instead of Expanded
, you can use Spacer
. It is the same as an Expanded
with an empty Container
.
Row(
children: <Widget>[
Text('Begin'),
Spacer(), // Defaults to a flex of one.
Text('Middle'),
// Gives twice the space between Middle and End than Begin and Middle.
Spacer(flex: 2),
Text('End'),
],
)
You can also use a SizedBox
for spacing in DIP:
Row(
children: <Widget>[
Text('Begin'),
const SizedBox(width: 42),
Text('Middle'),
],
)
Another one is Flexible
, which is similar to Expanded
but works with min/max size:
Row(
children: <Widget>[
Text('Begin'),
Flexible(
child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 100.0)),
),
Text('Middle'),
],
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With