플러터 기본 앱 레이아웃 만드는 법 (Scaffold)

 

0:49 MaterialApp()

2:08 Scaffold()

4:03 여러 위젯 가로/세로 배치하는 법

8:46 여러분의 친구 자동완성기능

 

 

오늘의 숙제 :

강의 하단 참고해서 하단바 디자인알아서 해오십시오

 

 

앱은 웹개발보단 쉽습니다. 화면이 작고 단순해서요.

오늘은 Scaffold 위젯과 가로 세로로 배치하는 법을 배워봅시다.

 

 

 

 

유용한 MaterialApp() 위젯

 

 

구글이 제공하는 기본 플러터 테마는 크게 2개가 있는데 

 

 

왼쪽은 Material Design, 오른쪽은 Cupertino 입니다.

왼쪽 같은 디자인을 사용하고 싶으면 일단 MaterialApp() 이라는 위젯으로 여러분 앱을 감싸면 됩니다.

 

 

 

(참고) Material Design 쓰려면 일단 pubspec.yaml 파일에 이런 항목이 켜져있어야합니다. 

flutter:
  uses-material-design: true 

 

 

 

 

 

 

머리가슴배로 나눠주는 Scaffold() 위젯

 

우리가 쓰는 앱의 디자인을 잘 보면 대부분 상단 중단 하단으로 되어있습니다.

 

 

 

인스타 유튜브 카톡 이런 앱들 보면

거의 다 상단/중단/하단으로 나눠져있습니다. 

이걸 쉽게 구성하고 싶으면 Scaffold() 위젯을 쓰면 됩니다.

그럼 알아서 상중하로 나눠줍니다. 

 

 

 

MaterialApp(
  home: Scaffold(
    appBar: 상단에 넣을 위젯,
    body: 중단에 넣을 위젯,
    bottomNavigationBar: 하단에 넣을 위젯,
  )
); 

Scaffold() 위젯은 appBar, body, bottomNavigationBar 이렇게 3개의 파라미터를 넣으면 상/중/하로 쪼개줍니다.

상단바 하단바는 필수는 아니고 body는 필수입니다. 

이제 상단 중단 하단에 글이든 그림이든 원하는 위젯 넣으시면 앱디자인 끝입니다.

 

 

 

 

 

 

 

MaterialApp(
  home: Scaffold(
    appBar: AppBar( title: Text('앱제목') ), 
    body: Text('안녕'), 
    bottomNavigationBar: BottomAppBar( child: Text('하단바임 ㅅㄱ') ),
  )
); 

그래서 맘대로 넣어봤습니다.

AppBar() 는 상단바 간단히 넣고싶을 때 쓰는 기본 위젯이며 title 파라미터를 가질 수 있습니다. 

BottomAppBar() 는 하단바 넣고싶을 때 쓰는 기본 위젯이며 child 파라미터를 가질 수 있습니다. 

 

Q. 무슨 파라미터 가질 수 있는지 어케 다 외우냐고요?

A. 언제나 소괄호 안에서 ctrl + space 누르면 확인가능합니다. 

맥북은 ctrl + space 누르면 이상한 검색메뉴 떠서 Android Studio의 keymap 설정들어가서 Completion 단축키 다른걸로 바꾸셔야합니다.

 

 

 

 

 

 

 

 

 

 

 

갑자기 아이콘을 가로로 3개 넣고 싶어졌습니다.

배운 기념으로 위젯들을 가로로 배치하는 법을 알아봅시다. 

한 곳에 가로로 혹은 세로로 위젯을 여러개 넣고 싶으면 

그럴 땐 Row() 또는 Column() 위젯과 children: 파라미터를 이용하면 됩니다.

 

 

 

 

 

 

 

가로/세로로 쪼개주는 Row/Column 위젯

 

가로로 균일하게 위젯을 배치하고 싶으면 Row() 위젯과 children: 파라미터를 쓰면 됩니다.

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

아무데나 Row() 위젯에 children: 파라미터를 넣고

[] 리스트 자료형 안에 위젯 넣고싶은대로 많이 넣으시면

자식 위젯들을 전부 가로로 배치해줍니다. 

아이콘이나 글자 위젯 넣어서 진짠지 확인해보십시오. 

 

 

 

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

Column() 위젯은 아무데나 쓰면 자식 위젯들을 세로로 배치해줍니다. 진짜 그런지 실험해보십시오.

 

 

 

 

 

 

 

가로로 배치하는 간격 조절하기

 

MaterialApp(
  home: Scaffold(
    body: Column( 
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [ Icon(Icons.star), Icon(Icons.star), Icon(Icons.star) ] 
    ), 
  )
); 

Row() 혹은 Column() 위젯은 mainAxisAlignment: 파라미터를 입력가능한데

그 파라미터로 위젯들이 배치되는 간격을 조절할 수 있습니다. 

 

.spaceEvenly 는 모든 여백 동일

.spaceBetween 은 좌우 끝에 우선 배치

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

.start는 시작 부분에 다 모여

.end는 끝 부분에 다 모여

.center는 중간에 다 모여 

입니다. 외울 필요는 없고 점찍고 자동완성기능 활용하면 됩니다.

 

 

 

 

Row() 말고 Column() 위젯을 사용해도 마찬가지로 정렬이 가능합니다. 

다만 Column() 은 mainAxisAlignment: 사용시 세로로 정렬해줍니다. 

왜냐면 Row() 쓰면 mainAxis가 가로가 되고

Column() 쓰면 mainAxis가 세로가 됩니다.

 

 

 

 

 

 

세로로 배치하는 간격 조절하기

 

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

mainAxis의 반대가 crossAxis 입니다.

그래서 Row() 안에서는 mainAxis가 가로, crossAxis는 세로입니다.

crossAxisAlignment 쓰면 세로정렬이 가능합니다.

 

CrossAxisAlignment: 파라미터에 입력가능한 것들은 .start .center .end 이런게 있는데 

자동완성으로 한번 실험해보시길 바랍니다. 

 

 

 

 

 

 

 

(숙제) 하단바 디자인해보기 

 

 

 

하단 바를 다음 시간까지 이렇게 만들어오십시오.

아이콘 이름은 phone, message, contact_page 입니다.