o7planning

Flutter EdgeInsets Tutorial with Examples

View more Tutorials:

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- Flutter EdgeInsets

EdgeInsets helps create the outer padding or the inner padding for a Widget based on the visual parameters, left, top, right, and bottom. It does not depend on the text direction.
To support both left-to-right and right-to-left layouts, take the EdgeInsetsDirectional into consideration.
  • TODO Link?

2- EdgeInsets.all

EdgeInsets.all constructor is used to create an EdgeInsets object with the same value for all four left, top, right, bottom properties.

const EdgeInsets.all(
   double value
)
EdgeInsets.all (ex1)

Container (
    margin: EdgeInsets.all(80),
    color: Colors.greenAccent,
    child:Text(
        "Hi There!",
        style: TextStyle(fontSize: 28)
    )
)

3- EdgeInsets.fromLTRB

EdgeInsets.fromLTRB constructor is used to create an EdgeInsets object based on the left, top, right and bottom values.

const EdgeInsets.fromLTRB(
    double left,
    double top,
    double right,
    double bottom
)
EdgeInsets.fromLTRB (ex1)

Padding (
    padding: EdgeInsets.fromLTRB(80, 100, 70, 50),
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: (){}
    )
)

4- EdgeInsets.only

EdgeInsets.only constructor creates an EdgeInsets object from the left, top, right and bottom optional parameters. The unspecified parameters will have a value of 0.

const EdgeInsets.only(
    {double left: 0.0,
    double top: 0.0,
    double right: 0.0,
    double bottom: 0.0}
)
EdgeInsets.only (ex1)

Container (
    color: Colors.greenAccent,
    padding: EdgeInsets.only(left: 120, top: 50, right: 80),
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: (){}
    )
)

5- EdgeInsets.symmetric

EdgeInsets.symmetric constructor creates a symmetric EdgeInsets object from the two horizontal and vertical parameters. It means:
  • left = right = horizontal
  • top = bottom = vertical

const EdgeInsets.symmetric(
    {double vertical: 0.0,
    double horizontal: 0.0}
)
EdgeInsets.symmetric (ex1)

Container (
    color: Colors.greenAccent,
    padding: EdgeInsets.symmetric(horizontal: 120, vertical: 50),
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: (){}
    )
)

6- EdgeInsets.fromWindowPadding


const EdgeInsets.fromWindowPadding(
    WindowPadding padding,
    double devicePixelRatio
)

View more Tutorials:

Maybe you are interested

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.