[Flutter 003] 레이아웃 만들기 Scaffold, 정렬하기 Row, Column

 

ㅣ

 

 

MaterialApp 위젯

 

구글이 제공하는 테마를 이용할 수도 있다 (UI나 위젯)

디자인만 제공하는게 아니라 여러가지 기본 세팅도 제공하기 때문에 

새롭게 커스터 마이징하더라도 이 위젯을 사용한다. 

 

---

 

 

Scaffold 위젯

보통 앱을 보면

 

상단에는 상단바가 

앱의 내용이 들어가있는 중단부 

(이 앱에선) 다른 화면으로 넘어가는 버튼이 있는 하단부가 있다. 

 

 

Scaffold 위젯은 이렇게 한 화면을 상중하 세 부분으로 분리해주는 역할을 한다. 

 

    return MaterialApp(
      home: Scaffold(
        appBar: ------,
        body: -------,
        bottomNavigationBar: --------,
      )
    );

이렇게 Scaffold() 안에

 

appBar 에는 상단 부분

boby 에는 내용(중간)

bottomNavigationBar에는 하단부분

 

에 들어갈 위젯들을 넣어주면 된다

 

 

ex)

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Container(),
        bottomNavigationBar: BottomAppBar(child: Text('끼약'),
      )
    );

화면

 

 

 

---

 

 

이제 body안에서 레이아웃 만드는 연습을 해보자!

 

 

 

가로로 여러가지 위젯을 나열하려면

Row() 위젯 안에 chidren으로 

위젯들을 넣어주면 된다.

 

Row ( children : [ ] )

 

 

ex)

    return MaterialApp(
      home: Scaffold(
        body: Row(
          children : [
            Icon(Icons.phone),
            Icon(Icons.menu),
            Icon(Icons.home)
          ]
        ),
      )
    );

 

화면

 

 

 

세로로 여러가지 위젯을 나열하려면

Row() 위젯 안에 chidren으로 

위젯들을 넣어주면 된다.

 

Column ( children : [ ] )

 

ex)

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children : [
            Icon(Icons.phone),
            Icon(Icons.menu),
            Icon(Icons.home)
          ]
        ),
      )
    );

화면