Flutter – Change Container Margins Differently at Left, Right, Top, Bottom

Set Different Flutter Container Margins on Each Side

Use the margin property of a Flutter Container with EdgeInsets.only() when the left, top, right, and bottom margins need different values. Margin creates empty space outside the container and separates it from surrounding widgets.

Flutter Container Margin Syntax with EdgeInsets.only()

The following syntax assigns an independent margin to each side of the container.

Container(
    margin: EdgeInsets.only(left: 20, top:10, right: 20, bottom:0),
    child: Widget,
)

The values are logical pixels. In this example, the container has a margin of 20 on the left, 10 on the top, 20 on the right, and 0 on the bottom.

You can provide only the named arguments you need in EdgeInsets.only(). Any omitted side uses the default value of 0.0.

Choose Left, Right, Top, and Bottom Margin Values

• left adds space outside the container’s left edge.
• right adds space outside the container’s right edge.
• top adds space above the container.
• bottom adds space below the container.

For example, a container that needs horizontal space but no vertical space can specify only left and right.

Container(
  margin: const EdgeInsets.only(left: 24, right: 24),
  child: const Text('Container with horizontal margins'),
)

A container can also use a margin on just one side. This is useful when spacing consecutive widgets without adding unnecessary space around every edge.

Container(
  margin: const EdgeInsets.only(bottom: 16),
  child: const Text('Space is added below this container'),
)

Flutter Application with Different Container Margins

In the following Flutter application, three Container widgets use different left, right, and top margins. Comparing the buttons makes the effect of each margin value visible.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Flutter - tutorialkart.com')),
      ),
      body: Container(
          child: ListView(children: <Widget>[
        Container(
            margin: EdgeInsets.only(left: 20, right: 20),
            child: RaisedButton(
                onPressed: () => {},
                textColor: Colors.white,
                color: Colors.lightGreen,
                child: Text(
                  'Click Me',
                  style: TextStyle(fontSize: 20),
                ))),
        Container(
            margin: EdgeInsets.only(left: 20, right: 50),
            child: RaisedButton(
                onPressed: () => {},
                textColor: Colors.white,
                color: Colors.lightGreen,
                child: Text(
                  'Click Me',
                  style: TextStyle(fontSize: 20),
                ))),
        Container(
            margin: EdgeInsets.only(left: 100, right: 70, top: 50),
            child: RaisedButton(
                onPressed: () => {},
                textColor: Colors.white,
                color: Colors.lightGreen,
                child: Text(
                  'Click Me',
                  style: TextStyle(fontSize: 20),
                ))),
      ])),
    ));
  }
}

The first container has equal left and right margins. The second has more space on the right. The third is moved farther from the left edge and also receives a top margin.

When you run this application, you will see the Container widgets in UI as shown below, with different margins on four sides.

Use EdgeInsets.symmetric() for Matching Margins

Use EdgeInsets.symmetric() when the left and right margins are equal, the top and bottom margins are equal, or both conditions apply. This produces shorter code than listing all four sides.

Container(
  margin: const EdgeInsets.symmetric(
    horizontal: 20,
    vertical: 12,
  ),
  child: const Text('Equal horizontal and vertical margins'),
)

Use EdgeInsets.all() for the Same Margin on Every Side

When every side needs the same amount of space, use EdgeInsets.all() instead of repeating the value for left, top, right, and bottom.

Container(
  margin: const EdgeInsets.all(16),
  child: const Text('A margin of 16 on every side'),
)

Container Margin and Padding Serve Different Purposes

Margin and padding both create space, but they affect different areas. A container’s margin creates space outside its boundary, while padding creates space inside the container between its boundary and child.

Container(
  margin: const EdgeInsets.only(left: 20, top: 12),
  padding: const EdgeInsets.all(16),
  child: const Text('Margin outside, padding inside'),
)

Flutter Container Margin Questions

How do I add a margin to only one side of a Flutter Container?

Use EdgeInsets.only() and provide the required side, such as EdgeInsets.only(top: 20). The other sides remain at zero.

How do I set equal left and right margins in Flutter?

Use EdgeInsets.symmetric(horizontal: value). You can also use EdgeInsets.only(left: value, right: value), but the symmetric form is more concise.

Why is the Container margin not visible?

Margin is transparent space outside the container, so it does not have its own color. Add a background color to the container or its parent while checking the layout, and confirm that the parent provides enough space for the requested margin.

Can a Flutter Container use both margin and padding?

Yes. Set margin for spacing outside the container and padding for spacing around the child inside the container.

Summary of Flutter Container Margin Options

Use EdgeInsets.only() to assign different margins to the left, right, top, and bottom sides of a Flutter Container. Use EdgeInsets.symmetric() for matching horizontal or vertical margins and EdgeInsets.all() when every side needs the same value.

In this Flutter Tutorial, we learned how to provide different values for left, top, right and bottom margins.