Flutter 간격

child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: const [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page)
              ],
            ),

padding

padding은 여백을 조절한다. 따라서 위 코드에서 EdgeInsets.all(8.0)을 EdgeInsets.all(40.0) 으로 바뀌주면 아래와 같은 결과를 볼 수 있다.

전 (8.0)

후 (40.0)

mainAxisAlignment

mainAxisAlignment를 이용하면 가로를 정렬할 수 있다.
그래서 Row와 함께 쓰이고 MainAxisAlignment.spaceEvenly 와 같은 속성을 사용한다.

crossAxisAlignment

crossAxisAlignment를 이용하면 세로를 정렬할 수 있다. 그래서 Column과 함께 쓰이고 CrossAxisAligment.start와 같은 속성을 사용한다.

Align

body: Align(
            alignment: Alignment.center,
            child: Container(
              width: 150,
              height: 100,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.amber)
              ),
            )
        ),

Align의 경우 Center 대신 사용할 수 있다.
설정은 Align( alignment: Alignment.center, ... 를 사용한다.

Box의 경우 Container를 사용하고 Container 안에서 decoration을 수정할 수 있다.