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 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( ) ), ); } 

Screenshot of the Problem

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 ( ... ), ), ); }