Flutter Layout Container Margin
I Have a Problem with My Flutter Layout. I Have a Simple Container with a Margin Right and Left of 20.0 Inside This Container I Have Another Container. but...
I have a problem with my Flutter Layout.
I have a simple container with a Margin right and left of 20.0 Inside this container i have another container.
But this container does not fit to the parent container only on the left side. I dont know why this happens.
Here is my Code:
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.white,
body: new Container(
margin: new EdgeInsets.symmetric(horizontal: 20.0),
child: new Container(
)
),
);
}
4 Answers
You can use left and right values :)
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Container(),
),
);
}
You can try: To the margin of any one edge
new Container(
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
child: new Container()
)
You can try :To the margin of any all edge
new Container(
margin: const EdgeInsets.all(20.0),
child: new Container()
)
If you need the current system padding or view insets in the context of a widget, consider using [MediaQuery.of] to obtain these values rather than using the value from [dart:ui.window], so that you get notified of changes.
new Container(
margin: EdgeInsets.fromWindowPadding(padding, devicePixelRatio),
child: new Container()
)
Container(
margin: EdgeInsets.all(10) ,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.black.withAlpha(0),
Colors.black12,
Colors.black45
],
),
),
child: Text(
"Foreground Text",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
You can try to set margin in the following ways.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container (
// Even margin on all sides
margin: EdgeInsets.all(10.0),
// Symetric margin
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
// Different margin for all sides
margin: EdgeInsets.fromLTRB(1.0, 2.0, 3.0, 4.0),
// Margin only for left and right sides
margin: const EdgeInsets.only(left: 10.0, right: 10.0),
// Different margin for all sides
margin: EdgeInsets.only(left: 5.0, top: 10.0, right: 15.0, bottom: 20.0),
child: Child
(
...
),
),
);
}
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
