Flutter – Edge Insets Class

Edge Insets are used for an offset from each of the four sides of a box. For example, the padding inside a box can be represented using this class. Edge Insets can give offset using different methods. In simple words, edge insets are used for padding the widget in Flutter. Typically Edge Insets have four methods – EdgeInsets.all, EdgeInsets.only, EdgeInsets.fromLTRB, EdgeInsets.symmetric. Below are the explanation with examples.

EdgeInsets.symmetric

Creates insets with symmetrical vertical and horizontal offsets.

For vertical:

Eight-pixel margin above and below, no horizontal margins:

Dart

const EdgeInsets.symmetric(vertical: 8.0)

For horizontal:

Eight-pixel margin above and below, no horizontal margins:

Dart

const EdgeInsets.symmetric(vertical: 8.0)

Example

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('EdgeInsets class'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 20,horizontal: 30),
            height: 200,
            width: 200,
            child: Text('EdgeInsets fromLTRB'),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

Output:

EdgeInsets.all

Creates insets where all the offsets are valued. The typical eight-pixel margin on all sides:

Dart

const EdgeInsets.all(8.0)

Example

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('EdgeInsets class'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(50),
            height: 200,
            width: 200,
            child: Text('EdgeInsets all'),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

Output:

EdgeInsets.only

Creates insets with only the given values non-zero.

Dart

(new) EdgeInsets EdgeInsets.only({
 double left = 0.0,
 double top = 0.0,
 double right = 0.0,
 double bottom = 0.0,
})

For left:

Left margin indent of 40 pixels:

Dart

const EdgeInsets.only(left: 40.0)

For right:

right margin indent of 40 pixels: 

Dart

const EdgeInsets.only(right: 40.0)

we can also give for top and bottom also.

Example

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('EdgeInsets class'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.only(left: 20,right: 10,top: 15,bottom: 30),
            height: 200,
            width: 200,
            child: Text('EdgeInsets'),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

Output:

EdgeInsets.fromLTRB

Creates insets from offsets from the left, top, right, and bottom.

Dart

(new) EdgeInsets EdgeInsets.fromLTRB(
 double left,
 double top,
 double right,
 double bottom,
)

Example

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('EdgeInsets class'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.fromLTRB(30, 60, 40, 10),
            height: 200,
            width: 200,
            child: Text('EdgeInsets fromLTRB'),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

Output: