Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - Padding using empty Containers?

Tags:

flutter

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)),
        ],
      )),
    ],
  )
like image 274
user6635665 Avatar asked Feb 12 '19 10:02

user6635665


1 Answers

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'),
  ],
)
like image 163
Rémi Rousselet Avatar answered Oct 20 '22 15:10

Rémi Rousselet