所有小部件的颤动填充？

我试图添加一些填充的顶部和底部的一些文字和图标在卡小部件。我发现 flutter 对于容器来说有一种简单的方法，但似乎找不到一种方法来对其他小部件做到这一点(除了将它们包装在容器中)。这是我目前得到的密码:

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

因此，在我的 column 子栏中，我希望在顶部和底部添加一些填充，而不必插入新的 Container。这可能吗？

159293 次浏览
小开
最佳答案

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.

小开

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.

小开

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'),
),
));
}
小开

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

提交答案