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), )), )
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.
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,
You might also like:
How To Easily Set Flutter Box Shadow Only Top
How To Easily Change Flutter Container Padding
How To Easily Change Flutter Container Height
How To Easily Implement Flutter Container Shape Circle
How To Easily Add Flutter Container Background Image
How To Easily Customize Flutter Box Shadow Offset
How To Easily Change Flutter Container Size
Acer Predator Helios 300 PH315 54 760S Gaming Laptop Amazing Specs
How To Easily Change Flutter Text Underline Color
How To Easily Change Flutter Container Color
How To Easily Customize Flutter Container Shadow
How To Easily Align Flutter Text Justify
How To Easily Set Space Between Flutter Text And Underline
How To Easily Set Flutter Text Letter Spacing
How To Easily Change Flutter Container Border Radius
How To Easily Change Flutter Container Shadow Color
Acer Nitro 5 AN515 57 79TD Gaming Laptop Amazing Specs-Best Gaming Laptop
