88

I'm trying to add some padding to the top and bottom of some text and icons in a Card widget. I found that flutter has an easy way to do this for containers, but can't seem to find a way to do this with other widgets (except for wrapping them in a container). This is the code I've got so far:

  body: new Container(
    padding: new EdgeInsets.all(10.0),
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget> [
        new Card(
          color: Colors.white70,
          child: new Container(
            padding: new EdgeInsets.all(10.0),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget> [ //Padding between these please
                new Text("I love Flutter", style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
                new Icon(Icons.favorite, color: Colors.redAccent, size: 50.0)
              ]
            )
          )
        )
      ]
    )
  )

So in my children of column, I'd like to add some padding to the top and bottom without having to insert a new Container. Is this possible?

1

4 Answers 4

102

You can use Padding, which is a very simple Widget that just takes another Widget as a child and an EdgeInsets object like the one you are already using as padding.

This approach of "composition over inheritance" in Flutter is very intentional. You can find a recent discussion of the pros and cons on Flutter's Gitter channel.

2
  • This worked perfectly. I just stumbled upon the docs for this and it stated that using a Container or Padding doesn't really make a difference. It just appears more readable to me to use padding for a widget without children like Text or Icon! Thanks :) May 18, 2017 at 17:11
  • 1
    In that case, why container widget has padding :) ?
    – FranXho
    Aug 30, 2021 at 17:06
86

Here is a supplemental answer that provides some code. As the accepted answer states, you can use the Padding widget. Flutter is different than Android or iOS because Padding is a widget rather than a property. (It is a property of Container, but internally it is still a widget.)

This is a Text widget wrapped with a Padding widget.

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text("text"),
);

See my fuller answer here.

3
  • does that apply padding to each child item or all together?
    – Jono
    Mar 4, 2019 at 16:39
  • @jonney, Padding only takes one child. If the child has a child, though, the padding will only be added around the Padding widget's direct child.
    – Suragch
    Mar 4, 2019 at 18:15
  • Putting the Padding object into children: <Widget>[ array made it work.
    – Marek
    Mar 12, 2019 at 12:54
12

If you are using Visual Studio Code, highlight your widget, click on the lightbulb, and select Wrap with Padding from the menu.

enter image description here

As you can see in the picture, it automatically wrapped the widget around a Padding widget.

enter image description here

@override
  Widget build(BuildContext context) {

    return Container(child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        decoration: InputDecoration(border: InputBorder.none, hintText: 'Enter a text'),
      ),
    ));
  }
8

Flutter Padding

More information - Flutter Padding

Use Padding Widget.

Below code just add padding to Text Widget like shown in the image. Use Flutter Inspector to see how padding laid out.

Padding(
          padding: const EdgeInsets.all(50.0),
          child: Text('Text Widget'),
        ),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.