본문 바로가기
프론트엔드/플러터

Scaffold

by 1005ptr 2023. 5. 2.
반응형

Scaffold란?

Flutter에서 Scaffold는 앱의 기본 구조를 제공하는 위젯입니다. Scaffold는 앱의 상단 바, 하단 탭 바, 바디(body)와 같은 구성 요소를 포함하여 앱의 뼈대를 구성하는데 필요한 많은 위젯을 내부적으로 구성하고 있습니다.

Scaffold는 다음과 같은 구성 요소를 가지고 있습니다.

AppBar: 앱 상단에 위치하는 바입니다. 일반적으로 앱의 로고나 타이틀 등을 표시합니다.
Body: 앱의 메인 콘텐츠를 포함하는 부분입니다. 일반적으로 ListView, GridView, Column, Row 등과 같은 다른 위젯을 자식으로 갖습니다.
Drawer: 앱 좌측에 위치하는 슬라이딩 메뉴를 제공합니다.
BottomNavigationBar: 앱 하단에 위치하는 탭 바를 제공합니다.
FloatingActionButton: 앱의 주요 작업을 수행하는 버튼을 제공합니다.
Scaffold는 다양한 화면을 간편하게 구성할 수 있도록 다양한 속성을 제공합니다. 예를 들어, AppBar의 색상을 변경하거나, Drawer를 추가하거나, BottomNavigationBar를 변경하거나, Floating Action Button을 추가하거나 할 수 있습니다.

다음은 Scaffold의 예시 코드입니다.

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(
    child: Text('Hello World!'),
  ),
);


위 예제에서는 Scaffold의 자식으로 AppBar와 Center 위젯을 사용하고 있습니다. AppBar는 앱 상단에 위치하며, Center는 화면 중앙에 Text 위젯을 배치하는데 사용됩니다. 이러한 구성으로 Scaffold는 앱의 기본 구조를 제공합니다.

반응형

'프론트엔드 > 플러터' 카테고리의 다른 글

Overlay  (0) 2023.05.02
Stack으로 겹치는 화면 만들기  (0) 2023.05.02
AppBar  (0) 2023.05.02
SafeArea  (0) 2023.05.02
Flutter의 Widget 종류와 StatefulWidget  (0) 2023.05.02

댓글