Flutter EdgeInsets Tutorial with Examples

Flutter EdgeInsets
EdgeInsets.all
EdgeInsets.fromLTRB
EdgeInsets.only
EdgeInsets.symmetric
EdgeInsets.fromWindowPadding

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.

Flutter EdgeInsetsGeometry

To support both left-to-right and right-to-left layouts, take the EdgeInsetsDirectional into consideration.

Flutter EdgeInsetsDirectional

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
)