CODEWITHSUNDEEP
flutterpaddingmargin
Minary
Minary

Reputation: 171

what the difference between margin and padding in Container widget using Flutter framework?




class app1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return (MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Hello ',
        home: Material(
          child: Container (
            alignment: Alignment.topCenter ,
            //padding: EdgeInsets.all (30 ),
            margin: EdgeInsets.all(30),
            child: Row(
              children: <Widget> [
                Text ( 'Hello There ' , style: TextStyle (fontSize: 30 ) ),
                ],
              ),
          ),
          ),



          )
    );

  }
}

I have a text widget when i apply the margin and after that apply the padding same result ? so what's the different ? enter image description here

Upvotes: 3

Views: 13577

Answers (3)

Hadi Khani
Hadi Khani

Reputation: 186

Padding: is the inner space of the element to the edge

Margin: is the space between widgets together

enter image description here

enter image description here

Upvotes: 14

Tasnuva Tavasum oshin
Tasnuva Tavasum oshin

Reputation: 4750

Easy Method :

**Padding is Space Around means in the container .

Margin is Space outside means out side of the container**

Upvotes: 3

bm888
bm888

Reputation: 555

Margin is the space around the widget. For example, from the edge of the container to the edge of the phone screen.

Padding is the space within the widget. For example, from the edge of the container to the text in it.

Check out this video from the flutter team around 0:40 to see a quick visual. https://api.flutter.dev/flutter/widgets/Container-class.html

Upvotes: 3

Related Questions