flutter EdgeInsets 사용법

EdgeInsets는 특정 위젯의 상하좌우에 여백을 두기 위해서 많이 사용한다.

 

EdgeInsets는 padding의 원소나, margin의 원소로 많이 사용되는데, 

padding은 위젯안쪽, margin은 위젯 바깥쪽이라는 것만 기억하면 된다. (화면상, 버튼상으로 위젯 안팎이 나뉨)

이해를 돕기위해서 간단하게 이미지를 만들어 보았다. 컨테이너 위젯에서 padding이나 margin을 사용하면 다음과 같이 나타난다. 

 

EdgeInsets의 사용법으로는 크게 세가지 방법이 많이쓰이는데,

 

EdgeInsets.all(10)	모든 방향으로 10픽셀 만큼의 여백
EdgeInsets.LTRB(20,15,10,5)	왼쪽(L) 20, 위쪽(T) 15, 오른쪽(R)10, 아래(B) 5 만큼의 여백
EdgeInsets.only(bottom:10)	아래 방향으로 10픽셀 만큼의 여백 (only지만 여러개를 넣을수도 있긴 하다, 하지만 그럴거면 LTRB를 쓰자.)

 

이제 EdgeInsets를 실제로 사용한 예시를 보자 (가독성을 위해서 MyPage class만 보인다)

class MyPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('snack bar'),
      ),
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 30,), //처음 여백을 만들기위해서 넣음.
            Container( height: 2, color: Colors.blue,),//분리되는걸 확인하기 위한 컨테이너
            Container( //padding을 사방으로 진행 나머지 같음
              width: 40,
              height: 40,
              child: Text('a',
                style: TextStyle(
                    fontSize: 20
              ),),
              padding: EdgeInsets.all(10),
              color: Colors.red,
            ),
            Container( height: 2, color: Colors.blue,),//분리되는걸 확인하기 위한 컨테이너
            Container( //margin을 사방으로 진행 나머지 같음
              width: 40,
              height: 40,
              child: Text('b',
              style: TextStyle(
                fontSize: 20,
              ),),
              margin: EdgeInsets.all(10),
              color: Colors.red,
            ),
            Container( height: 2, color: Colors.blue,),//분리되는걸 확인하기 위한 컨테이너
            Container( //margin을 LTRB로 진행
              width: 40,
              height: 40,
              child: Text('c',
                style: TextStyle(
                    fontSize: 20
                ),),
              margin: EdgeInsets.fromLTRB(30,10,0,0), //왼쪽 위 오른쪽 밑 순서 왼쪽이 티나게 하기위해서 키움
              color: Colors.red,
            ),
            Container( height: 2, color: Colors.blue,),//분리되는걸 확인하기 위한 컨테이너
            Container( //margin을 아래로만 진행
              width: 40,
              height: 40,
              child: Text('d',
                style: TextStyle(
                    fontSize: 20
                ),),
              margin: EdgeInsets.only(bottom:10),
              color: Colors.red,
            ),
            Container( height: 2, color: Colors.blue,),//분리되는걸 확인하기 위한 컨테이너
            Container( //margin과 padding 모두 사방으로 진행
              width: 40,
              height: 40,
              child: Text('e',
                style: TextStyle(
                    fontSize: 20
                ),),
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.all(10),
              color: Colors.red,
            ),
            Container( height: 2, color: Colors.blue,),//분리되는걸 확인하기 위한 컨테이너
          ],
        ),
      ),
    );
  }
}

이 코드를 실행한 결과는 다음과 같다. 

약간 설명을 하자면, 하늘색 실선은 내가 일부러 잘 보이기 위해서 넣은 것이고, 아까 child로 설명했던 부분이 a, b, c, d, e로 나타난다고 볼 수 있다. 

또한 c가 오른쪽으로 치우쳐져 있는것은, center는 margin까지 포함된 범위를 center로 두기 때문에, 왼쪽 margin이 오른쪽 margin보다 크면 오른쪽으로 치우치게 된다.

 

이상 EdgeInsets의 사용법과, padding과 margin의 차이를 알아보았다.