[Flutter] 기본 레이아웃을 구성하는 Scaffold 위젯

플러터에서 Scaffold 위젯은 앱의 화면 레이아웃을 구성하는 기본적인 틀을 제공한다.
모든 플러터 앱의 화면은 보통 Scaffold 위젯으로 시작된다.

Scaffold는 AppBar, body, FloatingActionButton 등을 포함한
플러터의 Material Design 가이드라인에 따라 기본 UI 구조를 제공한다.

Scaffold를 사용하면, 기본 레이아웃을 빠르게 설계할 수 있고, Material Design 스타일 가이드가 기본 스타일에 적용되어 있기 때문에 깔끔하게 적용된다. 그리고, body 영역에 원하는 모든 위젯을 배치하여 복잡한 레이아웃 설계도 가능하다.

Scaffold 주요 속성

1. appBar

화면 상단에 나타나는 AppBar 영역.
제목, 버튼, 메뉴 등을 포함할 수 있다.

Scaffold(
  appBar: AppBar(
    title: Text('앱바 제목'),
  ),
)

 

2. body

화면의 주요 콘텐츠를 배치하는 영역이다.
본문에 표시할 UI위젯을 여기에 추가한다.

Scaffold(
  body: Center(
    child: Text('Scaffold 본문 콘텐츠'),
  ),
)

 

3. floatingActionButton

화면 하단 오른쪽에 나타나는 버튼이다.
주로 사용자가 자주 누르게 될 주요 동작을 수행하는 버튼이다.

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('FAB 클릭');
    },
    child: Icon(Icons.add),
  ),
)

 

4. drawer

화면 왼쪽에 나타나는 Drawer.
메뉴를 열 수 있는 사이드바.

Scaffold(
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          child: Text('드로어 헤더'),
        ),
        ListTile(
          title: Text('항목 1'),
          onTap: () {},
        ),
      ],
    ),
  ),
)

 

5. bottomNavigationBar

화면 하단에 고정된 하단 내비게이션 바.
여러 화면으로 이동할 수 있는 탭이나 버튼을 포함한다.

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
      BottomNavigationBarItem(icon: Icon(Icons.search), label: '검색'),
    ],
  ),
)

 

예제 코드

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scaffold 예제'),
        ),
        body: Center(
          child: Text('Scaffold의 본문입니다.'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('플로팅 버튼 클릭!');
          },
          child: Icon(Icons.add),
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              DrawerHeader(
                child: Text('드로어 헤더'),
              ),
              ListTile(
                title: Text('항목 1'),
                onTap: () {},
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: '검색'),
          ],
        ),
        backgroundColor: Colors.grey[200],
      ),
    );
  }
}