1. Padding introduction

Padding is used to add Padding to child elements, that is, to specify the distance between the child element and the container boundary, in much the same way as the Padding property in Android ViewGroup

const Padding({ Key key, @required this.padding, Widget child, }) : assert(padding ! = null), super(key: key, child: child);Copy the code

EdgeInsets provide several methods

  • FromLTRB (double left, double top, double right, double bottom) : Specifies the fill in four directions.
  • All (double value) : all directions are filled with the same value.
  • Only ({left, top, right,bottom}) : the padding can be set in a specific direction (multiple directions can be specified at the same time).
  • Symmetric ({vertical, horizontal}) : Used to set the symmetric direction. Vertical refers to top and bottom, and horizontal refers to left and right.

2. Code testing

@override Widget build(BuildContext context) { return MaterialApp( title: 'open url', home: Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text('hello flutter'), ), body: Padding( // padding: EdgeInsets.all(16), // padding: EdgeInsets.fromLTRB(10, 20, 30, 40), // padding: EdgeInsets.only(left: 10, right: 30), padding: EdgeInsets.symmetric(vertical: 20), child: Container( color: Colors.blue, ), ), ), ); }}Copy the code

3. Operation effect

Each of the four padding effects annotated above is shown below