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

 

오늘의 숙제 :

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

 

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

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

---

() 위젯

MaterialApp 이라는 위젯 짚고 넘어가보기.

MaterialApp 도 대문자로 시작하고 소괄호 있는 거 보니까 위젯임. 

이 위젯을 써놓고 시작하면

구글이 제공하는

Material 테마 같은 걸 이용해서 내 앱을 쉽게 만들어 낼 수 있다. 

근데 구글 스타일임. 

 

아이폰 기본 앱 같은 스타일의 앱을 만들고 싶은경우

Cupertino 관련 위젯이 있음. 

반면에 둘 다 싫은 경우 

그래도 MaterialApp 을 집어넣고 시작하기. 

---

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

 

 

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

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

Q. 저는 구글스러운거 싫어요 커스텀 디자인을 넣고 싶은데요?

구글 기본앱같은 디자인으로 만들려면 Material 

아이폰 기본앱같은 디자인으로 만들려면 Cupertino 이런거 쓰면 되는데

대부분은 커스텀 디자인 앱을 만들겁니다.

그러고 싶으면 Material 쓰는게 맞습니다.  

 

이유1. MaterialApp() 은 디자인 뿐만 아니라 앱의 구조와 기본 설정도 제공해주는 유용한 위젯이라

이걸 벗어나면 여러분 코드양이 3배로 증가합니다.

이유2. Material을 기본적으로 사용하면서

구글 물을 좀 빼는 작업, 나만의 커스텀 색상과 애니메이션 입히는 작업

이걸 해주는게 훨씬 시간이 덜 걸립니다.

다들 이렇게 만듭니다. 

[collapse]

 

---

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

flutter:
  uses-material-design: true 

없으면 열고 추가해줌. 

---

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

home 이라는 파라미터 안에다가

Scaffold() 위젯 써주기.

그리고 appBar 도 써줌. 

그외의 것들도 

그대로 따라 쓰고 저장 눌러주기. 

앱을 상-중-하로 나눠주는 역할 

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

 

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

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

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

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

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

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

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

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

bottom 에 아무거나 넣어봄.

상단과 하단 지우고

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개 배치하고 싶어짐.

아이콘 위젯 갖다 써서

아이콘을 가로로 3개 배치하기

 

근데 박스 안에다가 Icon 을 집어넣고 싶으면

child 파라미터 꼭 써주기.

별모양 아이콘 넣어주기. 

 

왼쪽 위에 뜨는 이유는

scaffold 를 쓰면 기준점을 왼쪽 위로 잡아줌. 

여러 개의 아이콘 쓰고 싶으면

child 를 여러개 쓰는 걸까? 

- 아님

여러가지 요소를 가로로 균일하게 배치하고 싶은 경우

Container 가 아니라 Row 사용해보기 

그리고 child 말고 children 이라는 파라미터 있음. 

여기다가 여러가지 위젯을 추가해주면 됨.

 

그나저나 밑줄 성가심.

저 파일 들어간 다음에

rules 안에다가 저렇게 써 줌. 

prefer_const_literals_to_create_immutables: false

 

이제 밑줄 사라진 거 확인. 

 

---

 

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

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

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

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

 

---

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

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

세로는 Row 아니라 Column

---

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

아무데나 Row() 위젯에

children: 파라미터를 넣고

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

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

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

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

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

---

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

mainAxisAlignment 라는 파라미터가 있음. 

Row 안에다가 쓸 수 있는 파라미터

뒤에 저렇게 적어줄 경우

저장해주면 가운데 정렬 잘 된 거 확인.

또는 뒤에다가

자동완성 되는거 활용해보면

이런 식으로

flex 쓴 거처럼 활용도 가능.

flex 와 되게 유사

---

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가 세로가 됩니다.

---

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

crossAxisAlignment 라는 파라미터도 있음. 

= 반대축 정렬

Row 라는 위젯 안에서의

mainAxis 는 가로축 

corssAxis 는 세로축 

이런거 뒤에 채워주면 세로축으로 쉽게 정렬할 수 있음. 

근데 세로 정렬 하려면 상 하 폭이 있어야 함. 

Row 라는 위젯을 Container 안에 담아서 

상하 폭을 주면 상하 정렬도 할 수 있다. 

Row 말고 Column 의 경우에는

MainAxisAlignment 를 하게되면 

 

아까와 다르게 가로축이 아니라

세로 축으로 정렬 가능.

이유: column 위젯은 정축이 세로축임.

= 기본 베이스 축이 세로축 

마우스 올려보면 타입을 알려줌.

 

---

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 입니다.