Flutter Sizedbox 로 여백 넣기

앱 개발을 할때는 반드시 디자인을 위해서 공백을 둘 필요가 있다. 이때 주로 사용하는 것이 Sizedbox와 EdgeInsets이다.

A. Sizedbox

1. SizedBox의 용도

SizedBox는 크게 2가지의 용도가 있다.

 

1) Row나 Column과 같은 위젯의 children들 사이에 간격을 두고 싶을때 공백을 두기 위해서 사용함.

2) Container, button과 같은 다른 위젯을 child로 두면서 높이와 너비를 고정시키고 싶을때 사용함.

 

1)에서 Sizedbox가 편리한 이유는, column에서 쓸경우 width가, Row에서 쓸경우 height가 고정되므로 나머지 하나만 지정해 두면 된다는 점과, 복잡한 각 children 내부의 padding대신 다른 children으로 두기만 하면 되서 디버깅이 쉽다.

 

직접 코드를 통해 Sizedbox의 사용법을 확인해보자. 

2-1. Column, Row에 대한 Sizedbox 적용 

우선 기본적인 코드는 아래에서 복사한뒤, Mypage부분만 변경해보자.

플러터 기본코드

SizedBox를 삽입하지 않고 단순히 구현한 경우

class MyPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column( // 컨테이너 위젯
          children: [
            Text('How to use Sizedbox'),
            TextButton( // TextButton 부분은 이 분야와 관련이없음, 버튼삽입이라고 생각하기.
              style: TextButton.styleFrom(
                backgroundColor: Colors.yellow,
                primary: Colors.blue, // foreground
              ),
              onPressed: () { },
              child: Text('press!'),
            )
          ],
        ),
      ),
    );
  }
}

버튼과 Text사이의 거리가 가깝다는 점과, Text가 너무 위로 몰린다는 문제가 발생한다.

 

Sizedbox를 삽입하여 여백을 넣은경우 

class MyPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column( // 컨테이너 위젯
          children: [
            SizedBox(height: 100.0,), //Column이기 때문에 width는 Column에 맞춰서 자동으로 적용됨
            Text('How to use Sizedbox'),
            SizedBox(height: 50.0,),
            TextButton(
              style: TextButton.styleFrom(
                backgroundColor: Colors.yellow,
                primary: Colors.red, // foreground
              ),
              onPressed: () { },
              child: Text('press!'),
            )
          ],
          ),
      ),
    );
  }
}
 

위로 붙었던 문제와, Text와 button이 가깝다는 문제를 해결할수 있었다. Row에 적용할경우 Sizedbox에 height대신 width를 조절해주면 된다.

2-2. Child의 높이 너비 조정

내가 자세히 알려주지 않은 TextButton을 왜 가져왔을까?

TextButton은 우리가 많이 쓰는 기능중에, width와 height를 직접 조절할 수 없는 대표적인 기능이기 때문이다.

 

이 TextButton의 크기를 조절하기 위해서는 SizedBox의 두번째 기능을 사용해야 한다.

안드로이드 스튜디오에서 플러터를 사용할 경우,

TextButton 우클릭-Show context Actions(전구icon)-wrap with Sizedbox를 통해서 쉽게 구현 가능하다.

class MyPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column( // 컨테이너 위젯
          children: [
            SizedBox(height: 100.0,), //Column이기 때문에 width는 Column에 맞춰서 자동으로 적용됨
            Text('How to use Sizedbox'),
            SizedBox(height: 50.0,),
            SizedBox(
              width: 200.0,
              height: 150.0,
              child: TextButton(
                style: TextButton.styleFrom(
                  backgroundColor: Colors.yellow,
                  primary: Colors.red, // foreground
                ),
                onPressed: () { },
                child: Text('press!'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

이 기능을 이용하면 거의 모든 Widget의 size를 마음대로 조절할 수 있다.