플러터(Flutter)의 레이아웃에 대해 연속 글을 올릴 계획입니다. 플러터에서 위젯을 사용해서 레이아웃을 만드는 법에 대해 알아보도록 하겠습니다. 우선 가장 많이 쓰는 Scaffold부터 가볍게 시작해 봅시다.
이번 포스트는 다음 내용을 다루고 있습니다.
- Scaffold
- Appbar
- FloatingActionButton
- PersistentFooterButtons
우선 플러터의 기본 프로젝트를 자동생성해서 만들어 놓은 상태입니다.
*프로젝트 생성하는 법을 알고 싶으시면 이쪽글을 참고해 주세요.
레이아웃 만들기
main.dart 파일에서 자동 생성된 모든 코드를 삭제한 상태에서 시작해 보도록 하겠습니다.
아래 코드 살펴봅시다.
(1) 먼저 material.dart 라이브러리를 가져오고 있습니다. Dart와 플러터는 패키지를 사용하여 공유 라이브러리를 관리합니다. import 문을 사용하면 사용하려는 라이브러리의 클래스에 접근할 수 있습니다. 대부분의 플러터 앱에서는 material패키지를 사용하고 있습니다.
(2) Flutter 앱의 진입점은 main메서드 입니다. 여기에는 앱의 다른 모든 부분을 포함할 클래스를 가지는 runApp 명령이 포함되어야 합니다. runApp을 호출하면서 실제 프로젝트의 코드가 될 App을 건네주고 있습니다. 메인 메소드는 단 한 줄의 코드이므로 화살표 구문으로 만들어 주었습니다.
(3) Stateless 위젯인 App 위젯 클래스를 만들어 주었습니다. 보다시피 위젯은 build 메서드를 재정의 하고 있는 클래스일 뿐입니다.
(4) 플러터의 모든 위젯은 build 메서드에서 생성되며 모든 build 메서드는 빌드 컨텍스트를 인수로 사용합니다. 이 빌드 컨텍스트는 애플리케이션의 위젯 트리에서 현재 위치를 알려주는 역할을 합니다.
(5) 빌드 메서드 내에서는 MaterialApp을 반환하고 있습니다. MaterialApp은 위젯이기도 하며 Material Design 앱을 만들 때 사용할 컨테이너가 됩니다. 대부분의 플러터 앱이 콘텐츠를 MaterialApp 위젯으로 래핑하고 있습니다.
(6) MaterialApp의 home 프로퍼티에 Scaffold를 추가하고 있습니다.
스캐폴더(Scaffold) 알아보기
스캐폴더에는 appBar, body, floatingActionButton, persistentFooterButtons와 같은 다양한 프로퍼티를 가지고 있습니다. 스캐폴드의 코드를 작성해 보도록 하겠습니다.
(1) 스캐폴드에 AppBar를 추가했습니다. AppBar에서는 Text 위젯을 사용하는 title 을 추가하고 있습니다.
(2) Center 위젯을 사용하고 있는 body를 추가 하였습니다. Center 위젯은 수평 수직으로 자식을 중앙에 배치합니다.
(3) child에는 Text위젯이 포함되어 있고, style 속성으로 TextStyle 위젯을 사용하여 폰트 크기를 24로 설정하였습니다.
디버그 패널을 열고 디버그를 눌러 앱 화면에서 살펴보도록 하겠습니다. 이때 안드로이드 에뮬레이터 설정이 되어 있어야 합니다.
몇 초 후에 앱이 에뮬레이터 화면에 표시될 것입니다.
우리는 Scaffold 위젯의 두 가지 속성, appBar와 body를 사용했습니다. 아래 캡처에서 appBar는 빨간 상자, body는 파란 상자 영역입니다.
흥미로운 점은 현재 화면은 아무 작업 처리도 하지 않지만, 단 몇 줄의 코드만으로 앱 느낌의 레이아웃을 얻을 수 있었습니다. 이것이 플러터의 장점입니다. 이 상태에서 floatingActionButton을 추가해 보겠습니다.
FloatingActionButton
스캐폴드의 다른 프로퍼티인 floatingActionButton에 FloatingActionButton 위젯을 넣어주고 있습니다. child로는 Icon을 설정하였고, onPressed 매개변수로 버튼일 눌렸을 때 행동을 정의하였습니다. 예제에서는 단순히 콘솔에 문자열을 출력합니다. 디버그가 실행된 상태에서는 핫 리로드가 가능하므로 앱을 재실행하지 않고 저장만 해주면 에뮬레이터에서 코드가 반영됩니다. 화면을 보겠습니다.
프로퍼티에 정의를 해주는 것만으로 멋진 기능이 추가되었네요. 버튼을 두 번 클릭 하였고 콘솔을 확인해 보겠습니다.
'눌렀나?'라는 메시지가 두번 출력되었고, FloatingActionButton이 잘 작동하고 있음을 확인할 수 있습니다.
PersistentFooterButtons 위젯
이제 persistentFooterButtons를 설정해 보겠습니다.
persistentFooterButtons 는 위젯 배열을 설정해 주고 있으며, 세 개의 IconButton 위젯을 넣어주고 있습니다. IconButton 위젯에서는 icon 프로퍼티에 각각 Icon 위젯을 onPressed 속성에는 빈 함수를 연결해 두었습니다.
각 위젯들이 앱 화면에서 어떻게 나타나는지 살펴보겠습니다.
화면 우측 하단에 각 아이콘 버튼들이 잘 표시되고 있네요. 물론 이러한 위젯의 위치와 간격은 변경할 수 있습니다.
여기까지 수고하셨습니다.
계속해서 플러터의 위젯과 레이아웃을 알아보는 글을 업데이트하도록 하겠습니다.
'프로그래밍 > Flutter' 카테고리의 다른 글
| [Flutter Layout] 3. 플러터 Container 위젯, Size 크기 규칙 (0) | 2022.03.15 |
|---|---|
| [Flutter Layout] 2. 플러터 Themes, 다크모드, 앱의 컬러 선택 사이트 (0) | 2022.03.14 |
| [Flutter] 20. Dismissible 위젯 스와이프 삭제하기 (4) | 2022.03.08 |
| [Flutter] 19. 데이터 저장 앱 만들기4, SharedPreference ID관리 (0) | 2022.03.07 |
| [Flutter] 18. 데이터 저장 앱 만들기3, 데이터 읽기, ListTile 위젯 (0) | 2022.03.06 |
댓글