[Flutter] 가로세로 배치

*자동 완성 불러오는 법은 ctrl+space

 

1) 위젯 안에 위젯 넣는 법

~ : Center (

        child : Container() ) 의 식으로 쓸 수 있음

 

2) MaterialApp() 

- 이것도 위젯임. 이걸 이용하면 구글이 제공하는 Material 테마를 이용할 수 있음

- 구글 스타일 또는 커스터마이징

- 디자인과 기본 세팅을 제공함

 

3) Cupertino~()

-애플 스타일 

 

4) Scafold() 

- 상중하로 나눠주는 위젯

- 상단  : AppBar()

- body 

- 하단바 : bottomNavigationBar

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(),
    body: Container(),
    bottomNavigationBar: BottomAppBar(),

 

e.g

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('gkdl'),
    ),
    body: Container(
      child: Text('하윙'),
    ),
    bottomNavigationBar: BottomAppBar(
      child:Text('dkssud'),
    )

 

5) 가로로 위젯 여러줄로 추가하는 법 Row(children:[])

body: Row(
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
  ],
),

 

6) 세로로 위젯 여러불 추가하는 법 Column(children:[])

body: Column(
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
  ],
),

 

7) mainAcisAlignment

 각 Row, Column의 정 축들을 정렬하는 방법 

 Row의 가로!!!  Column은 세로!!!

child: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
  ],
),

  7-1) 뭉쳐서 정 가운데 : MainAxisAlignment.center

 

  7-2) 동일 간격 배치 : MainAxisAlignment.spaceEvenly (=>flex와 유사)

 

 

 

8) crossAxisAlignment

Row의 세로 축 정렬, Column의 가로 축 정렬

crossAxisAlignment:CrossAxisAlignment.center,

 

 

* 파라미터 우측에 뭘 넣을지 까먹었다면 ?

방법1 ) 왼쪽에 쓴걸 대문자로 오른쪽에 써본다.

방법2 ) 파라미터에 마우스를 올려보고 Type를 그대로 써본다. 

방법3 ) 그냥 구글링