[Flutter] 플러터 Margin마진 Padding 패딩 EdgeInsets 정리

dartpad.dartlang.org

위의 사이트에서 아래의 소스로 마진, 패딩 옵션을 확인 할 수 있다.

 

# margin, padding 패딩,마진 차이는?

컨테이너의

margin : 바깥쪽 영역과

padding : 안쪽 영역이다.

 

import 'package:flutter/material.dart';

void main() => runApp(ContainerExample());

class ContainerExample extends StatelessWidget {

  static const String _title = 'Container';

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      
      title: _title,
      
      debugShowCheckedModeBanner: false,
      
      home: Scaffold(
        
        appBar: AppBar(title: Text(_title)),
        body: Center(
          child:
            Column(
              children: <Widget>[
                Row(
                  children :<Widget>[
                    Container(
                      margin: EdgeInsets.all(10), //모든 외부 면에 10픽셀 여백
                      padding: EdgeInsets.all(5), //모든 내부 면에 5픽셀 여백
                      color: Colors.green,
                      child: Container(
                        width: 200,
                        height: 50,
                        color: Colors.white70,
                        child: Text('1> EdgeInsets.all'),
                      ),
                    ),           
                   Container(
                    margin: EdgeInsets.all(10), //모든 외부 면에 10픽셀 여백
                    padding: EdgeInsets.fromLTRB(20,30,10,15), //모든 내부 (left, top, right, bottom) 각 위치별로 준다.
                    color: Colors.green,
                    child: Container(
                      width: 200,
                      height: 50,
                      color: Colors.white70,
                      child: Text('2> EdgeInsets.fromLTRB'),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.all(10), //모든 외부 면에 10픽셀 여백
                    padding: EdgeInsets.only(left:50), //top, bottom, right, left의 여백을 준다. 
                    //따로 여백을 줄 수 있다. 복수가능 
                    color: Colors.green,
                    child: Container(
                      width: 200,
                      height: 50,
                      color: Colors.white70,
                      child: Text('3> EdgeInsets.only'),
                    ),
                  ),                  
                ]
              ),
              Row(
                children :<Widget>[
                  Container(
                    margin: EdgeInsets.all(10), //모든 외부 면에 10픽셀 여백
                    padding: EdgeInsets.only(left:50, right:10), //top, bottom, right, left의 여백을 준다. 
                  //따로 여백을 줄 수 있다. 복수가능 
                    color: Colors.green,
                    child: Container(
                      width: 200,
                      height: 50,
                      color: Colors.white70,
                      child: Text('4> EdgeInsets.only'),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.all(10), //모든 외부 면에 10픽셀 여백
                    padding: EdgeInsets.symmetric(vertical:50, horizontal:10), //가로 세로 값을 설정한다.
                    color: Colors.green,
                    child: Container(
                      width: 200,
                      height: 50,
                      color: Colors.white70,
                      child: Text('5> EdgeInsets.only'),
                    ),
                  ),                      
                  Container(
                    margin: EdgeInsets.all(10), //모든 외부 면에 10픽셀 여백
                    padding: EdgeInsets.zero, //없을 주지 않는다. .
                    color: Colors.green,
                    child: Container(
                      width: 200,
                      height: 50,
                      color: Colors.white70,
                      child: Text('6> EdgeInsets.zero'),
                    ) 
                  )
                ]
              )
            ]
          )
        )
      )
    );
  }
}