[Flutter] 05. StoreApp (4) Scaffold

서회정

May 22, 2025

💡

Material Design 기반 Flutter 앱에서 가장 기본적인 화면 구성 도구

앱 상단에 있는 AppBar, 본문에 있는 Body, 하단에 있는 BottomNavigationBar, 플로팅 버튼 등을 한 번에 설정할 수 있도록 도움

html의 관점에서 봤을 때, body와 유사함. header, main, aside, footer 등 정해진 의미와 역할이 있는 레이아웃 영역 태그들과 같이 위젯들이 동작함

✅ 예시

✅ Scaffold에 들어갈 수 있는 위젯

속성	설명
`appBar`	상단에 들어가는 앱바 (타이틀, 아이콘 등 포함 가능)
`body`	화면의 주 내용이 들어가는 영역
`floatingActionButton`	오른쪽 아래에 뜨는 둥둥 떠 있는 버튼
`drawer`	왼쪽에서 나오는 슬라이드 메뉴 (햄버거 메뉴)
`bottomNavigationBar`	하단 탭바나 메뉴 바
`backgroundColor`	Scaffold 전체 배경색
`persistentFooterButtons`	하단 고정 버튼 영역
`bottomSheet`	하단에 붙는 시트형 UI 요소

기본 형태


import 'package:flutter/material.dart';

void main() {
  runApp( MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        
      ),
    );
  }
}