CODEWITHSUNDEEP
flutter
user6635665
user6635665

Reputation: 347

Flutter - Padding using empty Containers?

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

Upvotes: 9

Views: 7538

Answers (2)

Apoorv Pandey
Apoorv Pandey

Reputation: 2511

extension EmptyPadding on num {
SizedBox get ph => SizedBox(height: toDouble());

SizedBox get pw => SizedBox(width: toDouble());
}

Simply use this extension for empty padding line number 20

See line number 20

Upvotes: 0

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277097

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

Upvotes: 20

Related Questions