[Flutter] 4. Scaffold 사용해서 앱 처럼 꾸미기

지난 포스트에서 만든 Hello World는 실제 앱이지만 앱처럼 보이지 않습니다.

Scaffold 위젯을 사용하여 레이아웃을 잡고, 여러 속성을 사용해서 실제 앱의 모양처럼 만들어 보도록 하겠습니다.

 

이번 포스트는 다음 내용을 다루고 있습니다.

1. Scaffold 위젯 사용하기
2. 위젯을 빠르게 감싸주는 방법(전구 이용, ctrl + .)
3. 에셋(asset) 이용해서 배경 이미지 넣기
4. 가독성 좋게 text수정하기

 

---

Scaffold 위젯 사용하기

현재 Hello World앱은 아래와 같은 모습입니다.

스케폴드는 다른 모든 위젯을 배치하는 기본 레이아웃 구조를 생성하므로 자주 사용하는 위젯중 하나입니다. home에서 Center와 Text 위젯을 제거하고 Scaffold를 추가해 보겠니다.

home에 Scaffold를 넣어주었고, 스케폴드의 appBar속성에서 앱 바에 표시할 텍스트를 포함하는 AppBar위젯을 배치 하였습니다. 다시 앱을 확인해 보겠습니다.

AppBar를 배치해 놓은 것만으로도 앱처럼 보이기 시작하네요. 조금 더 개선해 보도록 하겠습니다.

 

Scaffold에서 내용인 body을 추가하고 그 안에 텍스트를 넣었습니다.

코드를 살펴보면, title이 있는 appBar가 있고 텍스트가 포함된 스캐폴드의 body가 있습니다. 앱 상에서도 잘 표현되고 있습니다.

 

이제 텍스트를 body의 텍스트를 상단이 아닌 중앙에 배치해보도록 하겠습니다. 어떻게 해야할지 감이 오시나요? 정답은 Center위젯을 쓰는 것입니다.

Center위젯은 처음 Hello World텍스트를 출력할 때도 이용했었던 위젯인 거 기억하시나요?

 

위젯을 빠르게 감싸주는 방법

여기서 리팩토링하는 팁을 하나 소개하겠습니다. 방금 Text위젯을 Center위젯의 자식으로 넣어서 가로, 세로 중앙 정렬을 해줬습니다.  Center Widget을 감싸주는 것을 손으로 코딩하지 말고 다음과 같이 하면 빠르게 코딩이 가능합니다.  Text위젯을 선택한 다음 왼쪽에 나오는 전구를 클릭해 준후, 나오는 메뉴에서 "Wrap with Center"를 선택해 주세요. 전구를 이용하는것 말고 ctrl + . 으로도 가능합니다.

전구이용하여 리팩토링 하기

에셋(asset) 이용해서 배경 이미지 넣기

이제 배경을 추가해 보도록 하겠습니다. 먼저 앱에 사용하고자 하는 이미지와 파일을 포함할 폴더를 프로젝트의 루트 폴더에 만들어야 합니다. 폴더 이름을 assets으로 루트 폴더에 만들어 주었고 그 안에 nayo.jpeg파일을 넣어두었습니다.

 

이미지와 같은 에셋 사용하기 전에 모든 프로젝트에서 에셋을 찾을 수 있도록 선언을 해야합니다. pubspec.yaml 파일에서 에셋 선언 관리 설정을 할 수 있습니다.

아래와 같이 assets이 주석돼있는 부분이 있는 걸 찾아서 주석을 제거하도록 하겠습니다.

아래와 같이 수정하였습니다.

이제 assets폴더 아래 있는 파일들을 사용할 수 있게 되었습니다.

 

다시 소스로 돌아와서 Center위젯을 Container로 감싸주고 이미지 설정을 해보겠습니다.

컨테이너는 다른 위젯을 포함하는 위젯이고 배경을 가질 수 있습니다. 컨테이너에서 BoxDecoration을 포함하도록 decoration속성 설정하였습니다. BoxDecoration에서는 이미지를 가져오는 AssetImage 포함하고 있습니다. AssetImage에서는 assets폴더에 있는 프로젝트의 이미지 주소를 넣어줍니다. 이미지 fit설정에서 BoxFit.cover를 설정해서 이미지가 Container에 꽉 차게 설정해 주었습니다.

 

앱에서 살펴보면 이미지가 잘 나오고 있습니다!!

그런데 문제점이 글씨 읽기가 너무 힘든 것 같습니다. 이것을 해결하기 위해 다시 text를 컨테이너에 넣어보도록 하겠습니다.

가독성 좋게 수정하기

컨테이너를 Text의 상위 위젯으로 넣어주었고, decoration과 padding을 설정하였습니다. decoration설정으로는 color에 불투명 70% 흰색을 넣어주었고, 모서리를 둥글게 하기 위해 borderRadius속성에 모든 모서리를 둥글게 하기 위해 BorderRadius.all(Radius.circular(15))를 넣어주었습니다. padding설정은 EdgeInsets.all(14)를 주어 상, 하, 좌, 우 컨테이너 모든 면에 거리가 14px값을 설정하였습니다.

 

앱에서 확인해 볼까요?

텍스트 가독성이 훨씬 좋아졌네요.

마지막으로 텍스트 속성을 변경해보겠습니다.

Text위젯에 style속성을 추가하였고, TextStyle로 폰트 크기를 설정해 주었습니다. 또 textAlign 속성으로 중앙 정렬을 하였고, 텍스트 안에 "\n"를 넣으므로 텍스트의 줄 바꿈을 하였습니다.

 

 

수정된 앱의 모습은 아래와 같습니다.

---

 

여기까지 수고하셨습니다.

오늘은 여러 속성들을 이용해서 화면을 꾸며 봤는데요, css를 사용하지 않는 스타일링에 아직 거부감이 느껴질 수도 있을 것 같습니다. 다음 포스트에서는 Hello World 앱을 조금 더 리팩토링 해보도록 하겠습니다.