1. Scaffold란?
Scaffold Widget은 Material Design을 시각적인 레이아웃 구조로 구현할 수 있는 많은 기능을 가지고 있습니다.
상단 메뉴, 배경 색상, 본문 영역, 하단 메뉴 등 많은 주요 기능을 제공합니다.
2. Scaffold 생성자 및 속성
https://api.flutter.dev/flutter/material/Scaffold-class.html
Scaffold class - material library - Dart API
Implements the basic material design visual layout structure. This class provides APIs for showing drawers and bottom sheets. To display a persistent bottom sheet, obtain the ScaffoldState for the current BuildContext via Scaffold.of and use the ScaffoldSt
api.flutter.dev
Flutter Material API 가이드를 통해 Scaffold Widget의 생성자 및 중요 속성에 대해 정리해보도록 하겠습니다.
○ 생성자(Constructor)
○ 속성(Property)
1) appBar
- 매개변수 타입 : PreferredSizeWidget
- 역할 : 상단 메뉴 구현
2) backgroundColor
- 매개변수 타입 : Color
- 역할 : Scaffold Widget 전체 영역에 대한 배경색 구현
3) body
- 매개변수 타입 : Widget
- 역할 : 본문 영역 구현
4) bottomNavigationBar
- 매개변수 타입 : Widget
- 역할 : 하단 메뉴 구현
3. Scaffold 예제 코드
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: 'Description',
home: Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(
backgroundColor: Colors.teal,
title: const Text(
'TITLE',
),
),
body: const Center(
child: Text(
'BODY',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.info),
label: 'Info',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
),
),
),
);
}
예제 코드의 의미는 다음과 같습니다.
- 'Description'이라는 문자열로 App 설명서 작성
- Scaffold Widget으로 메인 화면을 구현
- backgroudColor Widget으로 회색 배경 설정
- AppBar Widget으로 상단 메뉴 구현
- backgroundColor 속성으로 teal 색상 설정
- title 속성으로 Text Widget 설정
- 'TITLE'이란 문자열로 제목 표시
- Text Widget으로 본문 구현
- Center Widget으로 Text Widget을 가운데 정렬 처리
- 'BODY'란 문자열 표시
- 문자열 크기 30, 굵은 글씨, 가운데 정렬
- Center Widget으로 Text Widget을 가운데 정렬 처리
- BottomNavigationBar로 하단 메뉴 구현
- BottomNavigationBar Widget의 items 속성 매개변수 타입은 List<BottomNavigationBarItem>
- BottomNavigationBarItem Widget은 아이콘 이미지와 라벨을 구현하는 역할
- Home 이미지와 'Home' 문자열 라벨 지정
- Info 이미지와 'Info' 문자열 라벨 지정
- Settings 이미지와 'Settings' 문자열 라벨 지정
- BottomNavigationBarItem Widget은 아이콘 이미지와 라벨을 구현하는 역할
- BottomNavigationBar Widget의 items 속성 매개변수 타입은 List<BottomNavigationBarItem>
4. Scaffold 실행 결과
'App Programming > Flutter' 카테고리의 다른 글
| [Flutter] Widget - Container (0) | 2022.04.18 |
|---|---|
| [Flutter] Widget - SafeArea (0) | 2022.04.17 |
| [Flutter] Widget - MaterialApp (0) | 2022.04.06 |
| [Flutter] Function - runApp (0) | 2022.04.06 |
| [Flutter] Flutter Material API (0) | 2022.04.06 |
댓글