flutter - container / padding

컨테이너 위젯을 이용해보고 패딩을 설정해보자

코드는 간략하게 바디에서 컨테이너 위젯을 만들어준다

body: Container(
        padding: EdgeInsets.all(30),
        color: Colors.grey,
        child: Text('hello'),
      ),

패딩을 설정할때는 바로 패딩에 값을 넣어줄 수는 없고, EdgeInsets를 활용하여 값을 줄 수 있다. 

위의 경우, 각각 패딩 30이 들어간다.

여기서 child 인 텍스트를 제거하는 경우, 화면 전체가 회색이 되지만,

child로 Text 위젯을 주게되면, 텍스트를 감싸는 만큼에만 회색이 들어간다. 그리고 패딩 값을 준만큼 패딩이 들어간다.

 

padding : EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),

EdgeInsets.symmteric 은 value 가 2개 필요하다.

이렇게 패딩값을 설정하면 왼,오는 30, 위,아래는 10만큼의 값이 들어간다.

 

padding : EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0), 

fromLTRB는 4개의 value가 필요하고, left, top, right, bottom 에 각각 픽셀값을 주게된다.

margin도 padding과 같은 방식으로 사용하면 된다.

 

margin도 color도 따로 설정해줄 필요가 없다면 Padding 위젯을 쓸 수 있다.

 body: Padding(
        padding:EdgeInsets.all(30.0),
        child:Text('hello'),
      ),

margin 이나 color를 설정해주고 싶다면 container 위젯을 쓰는 것이 가장 좋다.