[flutter 플러터] 52강 강의리뷰_요소를 중앙에 배치하는 방법, 가운데 정렬 (w/ mainAxisAlignment, Center)

다양한 요소들을 중앙에 배치 (=가운데 정렬) 하는 방법에는 크게 두 가지가 있다.

 

첫번째 방법, Center 위젯을 활용한다.

*주로 stless 위젯의 형태로 코드 작성 시 사용

 

중앙에 배치하고자 하는 요소를 Center 위젯으로 감싼다. 이때 단순히 감싸는 것이 아니라 요소들을 child의 프로퍼티에 작성해주어야 한다. 아무래도 가운데 정렬은 많이 쓰이는 기능이다보니 여러 단축키가 존재한다.

• 배치하고자 하는 위젯을 선택(클릭)한 후 Alt + Enter
  • 'Wrap with Center' 선택
• 배치하고자 하는 위젯을 선택(클릭)한 후 동일 라인의 전구 버튼 클릭
  • 'Wrap with Center' 선택
• 우측 사이드바의 Flutter Outline 선택(클릭)한 후 배치하고자 하는 위젯 선택
  • 'Wrap with Center' 버튼 선택 (가장 첫번째 아이콘)

왼쪽에서부터 차례대로 첫번째, 두번째, 세번째의 단축키 접근 방법

 

 

두번째 방법, Column 또는 Row 위젯의 mainAxisAlignment.center 프로퍼티를 활용한다.

이를 활용하면 children에 있던 요소들이 자동으로 메인축(Column - 중앙 세로축, Row - 중앙 가로축)을 따라서 나란히 배치된다.

 

Column( 
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('images/ohyoonjin.png'),
              ),
              Text(
                'Yoonjin Oh',
                style: TextStyle(
                  fontFamily: 'Pacifico',
                  fontSize: 40.0,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                )
                
                // 이하 생략