How To Easily Customize Flutter Container Margin

In this Flutter post, I will be explaining how to practically change Flutter container margin. I will be using an easy Flutter example to customize the margin of Flutter container widget so you face no issues while customizing Flutter container margin in your own Flutter apps.

So what are we both waiting for? Let’s get right into implementing it.

Outline

What is Flutter Container Margin?
Default Flutter Container Margin
Implementing Flutter Container Margin(3 Methods)
Flutter Container Margin Customization Source Code
Conclusion

What is Flutter Container Margin?

Flutter container margin is used to create a space/distance between the Flutter container widget and other widgets that might be present on the screen or the phone edges.
Don’t worry, I will be explaining each and everything using a proper Flutter example for you to better understand the customization of Flutter container margin.

Let’s now first see if we have a default margin of container and then we will customize that margin.

Default Flutter Container Margin

Now let’s see what the default margin of Flutter container is. For that, we have to first define a Flutter container having some height, width and a background color and then we will give it a child container of same height and width but different color. See the below code:

Container(
            height: 240,
            width: 240,
            color: Colors.green,
            child: Container(
                height: 240,
                width: 240,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text(
                  'Default Flutter Container Margin',
                  style: TextStyle(color: Colors.white),
                )),
          )

You can see that the default Flutter container margin looks zero. The child container is showing with its child Text widget.

Let’s now see multiple ways on how to change margin of Flutter container.

Implementing Flutter Container Margin(3 Methods)

To give margin to container, we have to use the margin constructor of the Flutter container widget class. We will now look at three ways on how to customize Flutter container margin. These methods are listed below:

Edge In Sets Symmetric
Edge In Sets All
Edge In Sets Only

Edge In Sets Symmetric

In Edge in sets symmetric, there are horizontal and vertical constructors. Horizontal gives the same margin to both left and right while vertical to the top and bottom. See the below code:

margin: EdgeInsets.symmetric(horizontal: 20, vertical: 60)

I have given edge in sets symmetric to the second container(which is provided as a child to the parent container widget). I have given different values to the horizontal and vertical constructors. You can see in the above image that the margin of vertical(top and bottom) is larger than horizontal(left and right).

If you want one or two or even more sides to have a different margin then use the copyWith. See the below code:

 margin: EdgeInsets.symmetric(horizontal: 20, vertical: 60).copyWith(top: 0)

flutter container margin symmetric

You can see that the top margin is removed as specified in the above code.

Edge In Sets All

It is used to give same margin value to each and every direction. See the below code:

margin: EdgeInsets.all(20)

You can see that all the sides have the same margin value. You can use copyWith if you want to give some sides a different margin values.

Edge In Sets Only

It is used to give each and every side a different value. You can give same value too, its your choice. For demonstration, we will give different value to each side. See below code:

EdgeInsets.only(top: 20, bottom: 50, left: 30, right: 5)

You can see that each side has a different margin value. You can use copyWith here as well but I don’t think it will be a good practice.

Now you have a detailed practical understanding of how to customize Flutter container margin with different methods. You can ask without hesitation, if you have any questions related to the customization of Flutter container margin. I would be glad to answer all.

The complete source code of the customized Flutter container margin is given in the below section.

Flutter Container Margin Customization Source Code

flutter container margin

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: 240,
            width: 240,
            color: Colors.green,
            child: Container(
                margin: EdgeInsets.all(40),
                height: 240,
                width: 240,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text(
                  'Flutter Container Margin Implemented',
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white),
                )),
          ),
        ],
      )),
    ));
  }
}

Conclusion

To conclude this post, we have discussed and practically implemented Flutter container margin with multiple ways. Hope you now will easily customize margin of Flutter container in your own Flutter apps. I would love to have your feedback on this post.

Do check out my other articles on articles on beautiful Flutter templates, Flutter widgets , custom Flutter animations including source code, Flutter web, Flutter books, Flutter app development and many more.

Some Flutter posts can be found listed below. Others can be found by using the search box of this site or the menu navigation bar. Thanks for reading this post.

Flutter app articles you might like to read: flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development. beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions,