👨‍💻 [Flutter] Flutter 에서 Scaffold 클래스는 무엇이며, 어떻게 활용할 수 있나요?

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

Flutter 에서 Scaffold 클래스는 무엇이며, 어떻게 활용할 수 있는지 간략히 알아보았습니다.

---

질문 >

Flutter 에서 Scaffold 클래스는 무엇이며, 어떻게 활용할 수 있나요?

답변 >

Flutter에서 Scaffold 클래스란?

Scaffold는 Flutter의 Material Design 기반 애플리케이션에서 기본적인 화면 구조를 제공하는 위젯입니다. Scaffold는 화면의 레이아웃과 구조를 정의하며, 앱의 AppBar, Drawer, FloatingActionButton, BottomNavigationBar 등의 주요 요소를 관리할 수 있는 컨테이너 역할을 합니다.

Scaffold는 Material Design 앱의 기본 틀을 제공하므로, 대부분의 Flutter 애플리케이션에서 사용됩니다.

---

Scaffold의 주요 속성

1. appBar:
   • 화면 상단의 AppBar를 정의합니다.
   • 제목, 메뉴 아이콘, 작업 버튼 등을 포함할 수 있습니다.
2. body:
   • 화면의 주요 콘텐츠를 표시하는 영역입니다.
   • 대부분의 위젯이 body에 배치됩니다.
3. floatingActionButton:
   • 화면 하단 우측에 위치하는 동작 버튼(FAB)입니다.
   • 일반적으로 중요한 작업(예: 새 항목 추가 등)에 사용됩니다.
4. drawer:
   • 화면 왼쪽에서 열리는 내비게이션 메뉴입니다.
   • 앱의 다른 섹션으로 이동하는 링크를 포함합니다.
5. bottomNavigationBar:
   • 화면 하단에 표시되는 탐색 바입니다.
   • 탭 기반의 탐색에 사용됩니다.
6. bottomSheet:
   • 화면 하단에 고정되거나, 임시로 나타나는 UI 구성 요소입니다.
7. backgroundColor:
   • 화면의 배경색을 설정합니다.
8. resizeToAvoidBottomInset:
   • 키보드가 나타날 때 화면의 레이아웃을 재조정할지 여부를 설정합니다.

---

Scaffold 활용 예제

1. 기본 사용

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scaffold Example'),
        ),
        body: Center(
          child: Text('Hello, Scaffold!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('FAB Pressed');
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

결과:

• 화면 상단에 AppBar가 표시되며, 중앙에 텍스트(Hello, Scaffold!)가 나타납니다.
• 하단 오른쪽에 플로팅 액션 버튼(FAB)이 위치합니다.

---

2. drawer 및 bottomNavigationBar 활용

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drawer & BottomNavigationBar'),
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              DrawerHeader(
                decoration: BoxDecoration(color: Colors.blue),
                child: Text('Menu', style: TextStyle(color: Colors.white)),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  print('Item 1 tapped');
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  print('Item 2 tapped');
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Main Content Area'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}

결과:

• 화면 왼쪽에서 슬라이드로 열 수 있는 Drawer가 추가됩니다.
• 화면 하단에 BottomNavigationBar가 표시됩니다.

---

3. bottomSheet 활용

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BottomSheet Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (context) {
                  return Container(
                    height: 200,
                    child: Center(
                      child: Text('This is a BottomSheet'),
                    ),
                  );
                },
              );
            },
            child: Text('Show BottomSheet'),
          ),
        ),
      ),
    );
  }
}

결과:

• 버튼을 누르면 화면 하단에서 BottomSheet가 나타납니다.

---

4. 키보드와의 상호작용 (resizeToAvoidBottomInset)

resizeToAvoidBottomInset 속성을 설정하면 키보드가 나타날 때 레이아웃이 자동으로 조정됩니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Keyboard Interaction'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(labelText: 'Enter Text'),
              ),
            ],
          ),
        ),
        resizeToAvoidBottomInset: true,
      ),
    );
  }
}

결과:

• 키보드가 나타날 때, 입력 필드가 키보드 위로 올라갑니다.

---

장점

1. Material Design 표준 준수:
   • Flutter의 Scaffold는 Google Material Design의 가이드라인을 준수하여 사용자가 친숙한 UI를 제공합니다.
2. 구성 요소 통합:
   • AppBar, Drawer, FloatingActionButton, BottomNavigationBar 등을 쉽게 추가할 수 있습니다.
3. 빠른 레이아웃 설정:
   • 기본 레이아웃 구조를 제공하여 UI 개발 시간을 단축합니다.
4. 유연성:
   • 다양한 위젯을 조합하여 복잡한 UI도 손쉽게 구성할 수 있습니다.

---

단점

1. iOS 디자인 제한:
   • Scaffold는 Material Design에 기반하므로 iOS 디자인(Cupertino) 스타일에서는 적합하지 않을 수 있습니다.
   • iOS에서는 CupertinoPageScaffold를 사용하는 것이 권장됩니다.
2. 복잡한 커스터마이징:
   • Material Design에서 벗어난 UI를 구성하려면 많은 커스터마이징이 필요할 수 있습니다.

---

결론

Scaffold는 Flutter에서 Material Design 스타일의 앱을 개발할 때 필수적인 위젯으로, 화면의 기본 구조를 빠르게 설정하고 주요 UI 요소를 통합할 수 있는 강력한 도구입니다. 다양한 속성을 활용하면 간단한 레이아웃부터 복잡한 레이아웃까지 손쉽게 구현할 수 있습니다. iOS 스타일의 UI를 구현하려는 경우에는 CupertinoPageScaffold와 병행하여 사용하는 것이 좋습니다.

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---