[Flutter] 앱 만들기 기초: Scaffold 활용 방법

 

 

Flutter는 Google에서 제공하는 UI프레임워크로, 크로스 플랫폼 앱 개발을 위한 강력한 도구입니다.

이번 포스트에서는 FLutter의 기본 위젯 중 하나인 Scaffold를 활용하여 앱의 기본 레이아웃을 구성하는 방법에 대해 알아보겠습니다.

 

Scaffold는 Flutter 앱의 기본적인 레이아웃 구조를 제공하는 위젯입니다. AppBar, Body, FloatingActionButton, Drawer 등의 다양한 구성 요소를 포함할 수 있어, 앱의 기본 레이아웃을 빠르게 설정할 수 있습니다.

 

Scaffold 구성 요소:

• AppBar: 앱의 상단에 표시되는 바로, 제목과 액션 버튼을 포함할 수 있습니다.
• Body: 앱의 주요 콘텐츠가 표시되는 공간입니다.
• FloatingActionButton: 주요 작업을 수행할 수 있는 플로팅 버튼입니다.
• Drawer: 앱의 사이드 메뉴를 나타내는데 사용됩니다.

Scaffold 사용 예시

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 예시'),
        ),
        body: Center(
          child: Text('안녕하세요, Flutter!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 여기에 버튼이 눌렸을 때 실행할 코드를 추가합니다.
            print('FloatingActionButton이 눌렸습니다!');
          },
          child: Icon(Icons.lightbulb_outline),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              UserAccountsDrawerHeader(
                accountName: Text("홍길동"),
                accountEmail: Text("gildong@example.com"),
                currentAccountPicture: CircleAvatar(
                  child: FlutterLogo(size: 42.0),
                ),
                otherAccountsPictures: [
                  CircleAvatar(
                    child: Text('A'),
                  ),
                  CircleAvatar(
                    child: Text('B'),
                  ),
                ],
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('홈'),
                onTap: () {
                  // 홈 메뉴 아이템이 눌렸을 때의 행동을 여기에 추가합니다.
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('설정'),
                onTap: () {
                  // 설정 메뉴 아이템이 눌렸을 때의 행동을 여기에 추가합니다.
                },
              ),
              ListTile(
                leading: Icon(Icons.question_answer),
                title: Text('도움말'),
                onTap: () {
                  // 도움말 메뉴 아이템이 눌렸을 때의 행동을 여기에 추가합니다.
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

Scaffold 위젯: Scaffold는 앱의 기본적인 레이아웃을 구성하는 데 사용됩니다. AppBar, Body, FloatingActionButton, Drawer 등의 구성 요소를 포함할 수 있습니다.

 

AppBar: AppBar 위젯을 사용하여 앱 바를 설정할 수 있습니다. 여기에는 제목과 필요에 따라 액션 버튼을 추가할 수 있습니다.

 

Body: Body 속성을 사용하여 앱의 주요 콘텐츠를 설정합니다. 이 예시에서는 중앙에 "안녕하세요, Flutter!"라는 텍스트를 표시합니다.

• FloatingActionButton: FloatingActionButton을 사용하여 주요 작업을 위한 플로팅 버튼을 추가할 수 있습니다. 이 버튼은 화면의 오른쪽 하단에 위치하며, onPressed 콜백을 통해 클릭 이벤트를 처리할 수 있습니다.

• Drawer: Drawer를 사용하여 앱의 사이드 메뉴를 구성할 수 있습니다. 사용자 계정 정보, 메뉴 항목 등을 표시할 수 있습니다.

이 예시는 Scaffold 위젯을 사용하여 기본적인 앱 구조를 설정하는 방법을 보여줍니다. AppBar에는 앱의 제목이 들어가고, Body 부분에는 "안녕하세요, Flutter!"라는 텍스트가 중앙에 위치합니다. FloatingActionButton은 화면 오른쪽 하단에 위치하며, 클릭 시 콘솔에 메시지를 출력합니다. Drawer 메뉴는 화면 왼쪽에서 스와이프 할 때 나타나며, 사용자의 계정 정보와 몇 가지 메뉴 항목을 표시합니다.

이처럼 Scaffold를 사용하면 Flutter 앱의 주요 구성 요소를 쉽게 추가하고 관리할 수 있습니다.