Flutter Layout Container Margin

Question

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

Are you sure ? We can clearly see the two vertical bar on each side. — Rémi Rousselet, Mar 19 '18 at 18:43
Yes the parent Container is right, but the child container does not fit in the parent container (marked blue area) — M. Berg, Mar 19 '18 at 19:22
if you ever want to know How the child Widget fits inside the parent, just wrap the child inside a container and give a color to the container — Mahesh Jamdade, Jan 05 '19 at 15:51

score 144 · Answer 1 · edited May 12 '20 at 00:57

144

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

edited May 12 '20 at 00:57

iDecode

22,623
19
99
186

answered May 15 '18 at 11:03

Adonis González

1,978
1
8
14

2

Also "margin: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 0.0)," can be used. – dmarquina Oct 07 '18 at 23:45
1

Why did you write `const`? – Cold_Class Jul 27 '19 at 08:50
2

@Cold_Class `const` is a keyword that indicates that the constructor is const constructor i.e it can only take compile time values and the not the values that evaluate at runtime like some variable. – Kushagra Saxena Aug 19 '19 at 11:04
@KushagraSaxena Is there a benefit from doing it this way - like a performance boost? Because I'd imagine it could be quite useful to have the margin value for multiple elements stored in a variable instead. – Cold_Class Aug 20 '19 at 12:00
1

@Cold_Class No its nothing related to performance. Its just the convention that dart says to follow. https://dart.dev/guides/language/effective-dart/design#consider-making-your-constructor-const-if-the-class-supports-it – Kushagra Saxena Aug 20 '19 at 12:03
Fixed! unbelievable, why? `EdgeInsets.symmetric` is implemented by assigning `left`, `right`, pretty much the same thing, `EdgeInsets.only` too, why – http8086 Jun 02 '22 at 09:58

vinod yadav · Answer 2 · 2022-08-28T15:13:23.777

29

You can try: To the margin of any one edge

Container(
    margin: const EdgeInsets.only(left: 20.0, right: 20.0),
    child: Container()
)

You can try :To the margin of any all edge

Container(
    margin: const EdgeInsets.all(20.0),
    child: 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.

Container(
    margin: EdgeInsets.fromWindowPadding(padding, devicePixelRatio),
    child: Container()
)

edited Aug 28 '22 at 15:13

answered Dec 12 '19 at 06:45

vinod yadav

526
10
21

True, but why `EdgeInsets.symmetric(horizontal: 20.0)` does not work while `EdgeInsets.only(left: 20.0, right: 20.0)` works, looks the same thing to me since checked the implementation of both – http8086 Jun 02 '22 at 10:36

score 9 · Answer 3 · edited Aug 09 '20 at 13:15

9

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),
  ),
),

edited Aug 09 '20 at 13:15

David Buck

3,752
35
31
35

answered Aug 09 '20 at 12:54

Mhammed Khaled

89
1
2

Can you add some details to explain how your code answer the question ? – Guillaume S Aug 09 '20 at 15:04

score 2 · Answer 4 · answered Mar 28 '22 at 02:54

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

score 0 · Answer 5 · answered Jul 13 '23 at 10:45

Padding and Margin side by side.

Container(
        padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
        margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
}

Padding and Margin only.

Container(
        padding: const EdgeInsets.only(left: 10.0, right: 10.0),
        margin: const EdgeInsets.only(left: 10.0, right: 10.0),
}

Padding and Margin all side same.

Container(
        padding: const EdgeInsets.all(10.0),
        margin: const EdgeInsets.all(10.0),
}

Flutter Layout Container Margin

5 Answers5

Linked