플러터에서 Scaffold 위젯 이해하기

 

Flutter에서 Scaffold 위젯 이해하기

Flutter는 다양한 위젯들로 구성되어 있으며, 그 중 Scaffold는 화면을 구성하는데 중요한 역할을 합니다. Scaffold 위젯은 머티리얼 디자인 레이아웃 구조를 제공하여 앱의 기본적인 화면을 쉽게 구성할 수 있도록 도와줍니다. 이번 블로그에서는 Scaffold 위젯의 기본 사용법과 주요 속성들에 대해 알아보겠습니다.

1. Scaffold 위젯이란?

Scaffold는 Flutter 앱의 기본 레이아웃 구조를 제공하는 위젯으로, 앱 바(AppBar), 드로어(Drawer), 바텀 네비게이션 바(BottomNavigationBar) 등을 포함할 수 있습니다. Scaffold를 사용하면 머티리얼 디자인 가이드라인을 따르는 앱을 쉽게 만들 수 있습니다.

2. Scaffold의 주요 속성들

Scaffold에는 다양한 속성들이 있으며, 그 중 몇 가지 주요 속성을 살펴보겠습니다.

appBar : 앱의 상단에 표시되는 앱 바를 정의합니다.
body : 앱의 주요 콘텐츠가 표시되는 영역입니다.
drawer : 앱의 왼쪽에서 슬라이드되어 나오는 내비게이션 드로어를 정의합니다.
bottomNavigationBar : 화면 하단에 표시되는 네비게이션 바를 정의합니다.
floatingActionButton : 화면 하단에 떠 있는 액션 버튼을 정의합니다.

3. Scaffold 사용 예제

아래는 Scaffold 위젯을 사용하여 기본적인 화면을 구성하는 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scaffold Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scaffold Example'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 버튼 클릭 시 실행될 코드
        },
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: 0,
        selectedItemColor: Colors.amber[800],
        onTap: (index) {
          // 탭 클릭 시 실행될 코드
        },
      ),
    );
  }
}

4. 예제 코드 설명

AppBar : 앱의 상단에 표시되는 앱 바로, 제목을 설정했습니다.
Body : 중앙에 "Hello, Flutter!"라는 텍스트를 표시합니다.
Drawer : 왼쪽에서 슬라이드되어 나오는 내비게이션 드로어를 설정했습니다. 드로어 헤더와 리스트 타일들을 포함하고 있습니다.
FloatingActionButton : 화면 하단에 떠 있는 액션 버튼을 설정했습니다. 클릭 시 동작할 코드를 정의할 수 있습니다.
BottomNavigationBar : 화면 하단에 표시되는 네비게이션 바를 설정했습니다. 탭 클릭 시 실행될 코드를 정의할 수 있습니다.

5. 결론

Scaffold 위젯은 Flutter에서 기본적인 레이아웃 구조를 제공하여 앱 개발을 용이하게 합니다. 이 블로그에서는 Scaffold의 주요 속성들과 예제 코드를 통해 기본적인 사용법을 알아보았습니다. Scaffold를 잘 활용하면 Flutter에서 더욱 효율적으로 앱을 개발할 수 있습니다.