[Flutter] Layout(Scaffold, Row, Column)

상중하로 나눠주는 Scaffold() 위젯

What?

앱은 대부분 [상단바 - body - 하단바] 로 나뉘어 있다.

이를 쉽게 구성하고 싶을 때 쓰는 위젯이 Scaffold()위젯

 

When?

상중하를 구성할 때

 

How to Use

Scaffold(
	appBar: 상단에 넣을 다른 위젯,
	body: 중단에 넣을 다른 위젯, 
	bottomNavigationBar: 하단에 넣을 다른 위젯,
	floatingActionButton: 플로팅 액션버튼에 넣을 다른 위젯,
),

Scaffold(
	appBar: AppBar( title: Text('상단바')),
	body: Text('중간'),
	bottomNavigationBar: BottomAppBar(child: Text('하단바')),
    floatingActionButton : Text('플로팅'),
),

AppBar() : 상단바를 간단히 넣고 싶을 때 쓰는 위젯

- title 파라미터를 씀

BottomAppBar() : 하단바 넣고 싶을 때 쓰는 위젯

- child 파라미터 : 

 

 

가로, 세로로 위젯을 배치하고 싶을 때 Row(), Column() 위젯

What&When?

가로, 세로로 위젯을 배치하고 싶을 때

 

How?

Row(), Column()위젯에 children: 파라미터를 넣고 []리스트 자료형 안에 위젯 넣고싶은대로 우다다 넣기~

Column( 
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [ Icon(Icons.star), Icon(Icons.star), Icon(Icons.star) ] 
    ),

 

세밀한 조정도 할 수 있다!

Row(), Column() 위젯 안에 mainAxisAlignment: 파라미터를 입력할 수 있음

 

--

 

mainAxisAlignment: 

.spaceEvenly  : 모든 여백 동일

.spaceBetween : 좌우 끝에 우선 배치

.spaceAround : 모든 여백 동일인데 좌우 마지막 여백은 절반만큼

.start : 시작 부분에 다 모여

.end : 끝 부분에 다 모여

.center : 중간에 다 모여 

body: Container (
  color: Colors.grey,
  height : 400,  //높이 넣어야 세로정렬 가능할듯 
  child : Row (
    crossAxisAlignment: CrossAxisAlignment.start,
    children: const [
      Icon(Icons.star),
      Icon(Icons.star),
      Icon(Icons.star),
    ],
  ),
),