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:
const EdgeInsets.symmetric(vertical: 8.0)
|
For horizontal:
Eight-pixel margin above and below, no horizontal margins:
const EdgeInsets.symmetric(vertical: 8.0)
|
Example
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:
const EdgeInsets.all(8.0)
|
Example
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.
( 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:
const EdgeInsets.only(left: 40.0)
|
For right:
right margin indent of 40 pixels:
const EdgeInsets.only(right: 40.0)
|
we can also give for top and bottom also.
Example
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.
( new ) EdgeInsets EdgeInsets.fromLTRB(
double left,
double top,
double right,
double bottom,
) |
Example
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: