Margin Widget

What is Margin Widget?

Use margin to modify an widgets appearance.

Code snippet

EdgeInsets: An immutable set of offsets in each of the four cardinal directions. Typically used for an offset from each of the four sides of a box.

[EdgeInsets], the class that is used to describe the margin dimensions.

margin: const EdgeInsets.all(10.0),

01 Use case

Creates insets where all the offsets of value 10.0

The following code snippet, shows add the fifty-pixel margin on all sides

// margin
margin: const EdgeInsets.all(10.0),

02 Use case

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

The following code snippet, shows add the different pixel margin to different sides

// margin
 margin: const EdgeInsets.fromLTRB(50.0, 40.0, 50.0, 40.0),

// padding
 margin: const EdgeInsets.fromLTRB(50.0, 40.0, 50.0, 40.0),

03 Use case

Creates insets with only the given values non-zero.

The following code snippet, shows add the left, right, top, bottom margin indent of 50 pixels.

// margin
 // Left margin indent of 30 pixels:
 margin: const EdgeInsets.only(left: 30.0),

 // right margin indent of 30 pixels:
 margin: const EdgeInsets.only(right: 30.0),

 // top margin indent of 30 pixels:
 margin: const EdgeInsets.only(top: 30.0),

 // bottom margin indent of 30 pixels:
 margin: const EdgeInsets.only(bottom: 30.0),

04 Use case

Creates insets with above and below.

The following code snippet, shows add the fifty pixel margin above and below, no horizontal margins.

// margin
margin: const EdgeInsets.symmetric(vertical: 50.0),

//padding
margin: const EdgeInsets.symmetric(vertical: 50.0),

05 Use case

Creates insets with left and right.

The following code snippet, shows add the fifty pixel margin above and below, no horizontal margins.

// margin
margin: const EdgeInsets.symmetric(horizontal: 50.0),

//padding
margin: const EdgeInsets.symmetric(horizontal: 50.0),

Demo Code

The following example, shows add the Left margin indent of 50 pixels.

import 'package:flutter/material.dart';

class MarginDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        color: Colors.blue[200],
        child: Container(
          // Left and right margin indent of 50 pixels
          margin: const EdgeInsets.only(left: 50.0, right: 50.0),
          color: Colors.blue[600],
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  static const String _title = 'AnimatedPadding';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MarginDemo(),
      debugShowCheckedModeBanner: false,
    );
  }
}

void main() => runApp(MyApp());