[Flutter] Scaffold로 앱의 상중하 나누기

*코딩애플의 Flutter강의를 보면서 따라한 내용입니다.

 

왼쪽과 같은 화면을 만들기 위해 오른쪽 코드를 작성하였다. 

 

---

우선 기본틀은 아래 코드와 같다.

대략 이렇게 해서 앱의 상 중 하 파트를 나누고 여기서에서 각각 필요한 부분을 틀 안에서 고치면 된다. 

home: Scaffold(
  appBar: Appbar(),
  body: Container(),
  bottomNavigationBar: BottomAppBar(),
  )
);

 

• 상단의 파랑부분 만들기

우선 해야할 것은 색깔과 텍스트 '앱임'을 넣어주는 것이다.

ctrl+space바를 누르면 자동완성기능(?) 거기에서 쓸 수 있는 명령어들이 쫘르륵 나오는데 대충 비슷한 거를 골라서 하면 된다. 

backgroundColor가 나오길래 클릭하고 blue로 설정해주었더니 색이 바로 파랑으로 바뀌었다.

그리고 텍스트의 경우는 title을 먼저 치고, 이후에 text 위젯을 이용해주면 된다. 

 

• 중앙 바디부분 만들기

여기는 텍스트만 넣으면 끝이다. 

바로 text위젯을 이용해주었다. 

 

• 하단의 아이콘 넣기

아이콘을 여러 개 넣고, 적절히 정렬해야 한다. 

children으로 묶인 icon위젯을 3개 설정해주고, 이를 child로 다시 묶어준다. 

이때 이 친구들이 가로로 정렬되어야 하므로, mainaxisalignment 에서 spaceAround라는 정렬을 이용해준다. 

그리고 이것 자체도 다시 child로 싸준다.