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.
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), )), )
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)
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 60).copyWith(top: 0)
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)
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)
Flutter Container Margin Customization Source Code
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. Thanks for reading this post.
