[Flutter] Scaffold 란?

Flutter의 Scaffold

Scaffold는 Flutter에서 앱의 기본 레이아웃을 구성하는 위젯입니다. 일반적으로 앱의 상단바(AppBar), 본문(body), 하단 내비게이션 바(BottomNavigationBar), 플로팅 액션 버튼(FloatingActionButton) 등을 쉽게 배치할 수 있도록 도와줍니다.

 

 

 

 

 

Scaffold의 주요 구성 요소

• appBar: 앱의 상단에 위치하는 앱바를 설정합니다. 보통 제목이나 메뉴 버튼을 표시합니다.
• body: 화면의 본문을 차지하는 부분입니다. 주로 UI의 주요 콘텐츠가 위치합니다.
• floatingActionButton: 화면 오른쪽 하단에 위치하는 플로팅 액션 버튼을 추가합니다.
• drawer: 왼쪽에서 슬라이드되는 내비게이션 메뉴(서랍)를 추가할 수 있습니다.
• bottomNavigationBar: 화면 하단에 고정되는 내비게이션 바를 설정할 수 있습니다.
• backgroundColor: 화면의 배경색을 설정합니다.

 

 

 

 

Scaffold 예제

아래 예제는 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('Hello, Flutter!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('플로팅 액션 버튼 클릭됨');
          },
          child: Icon(Icons.add),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(
              child: Text('하단 내비게이션 바'),
            ),
          ),
        ),
      ),
    );
  }
}
    

 

 

 

 

 

 

 

 

 

Scaffold의 주요 속성들

• appBar: 상단에 위치하는 AppBar 위젯을 설정하여 앱의 제목, 메뉴 등을 표시합니다.
• body: 주 콘텐츠가 위치하는 영역을 설정하며, 다양한 레이아웃 위젯을 포함할 수 있습니다.
• floatingActionButton: 앱 화면 하단 오른쪽에 배치되는 원형 버튼입니다. 사용자 상호작용을 위한 주요 액션 버튼으로 사용됩니다.
• bottomNavigationBar: 하단 내비게이션 바를 추가하여 화면 전환이나 주요 액션을 배치할 수 있습니다.
• drawer: 화면 왼쪽에서 슬라이드하여 나타나는 내비게이션 메뉴입니다.

 

 

 

 

 

 

 

플로팅 액션 버튼(FAB)

플로팅 액션 버튼은 일반적으로 특정 작업을 빠르게 수행할 수 있게 해주는 버튼으로, 화면의 하단 오른쪽에 배치됩니다. FloatingActionButton 속성을 사용하여 설정할 수 있습니다.

플로팅 액션 버튼 예제

floatingActionButton: FloatingActionButton(
  onPressed: () {
    print('플로팅 액션 버튼 클릭됨');
  },
  child: Icon(Icons.add),
),
    

 

 

 

 

 

 

 

 

Scaffold의 역할

Scaffold는 앱의 기본 레이아웃을 구성하는 중요한 위젯입니다. 앱을 개발할 때, 기본적인 레이아웃 구조를 쉽게 설정할 수 있으며, 자주 사용되는 요소들을 관리하기 쉽습니다. Flutter에서 Scaffold를 사용하면 앱의 일관된 레이아웃을 유지할 수 있고, 사용자 인터페이스를 쉽게 구축할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

결론

Scaffold는 Flutter에서 앱의 기본 구조를 설정하는 데 매우 유용한 위젯입니다. AppBar, body, FloatingActionButton, BottomNavigationBar 등 다양한 UI 요소들을 쉽게 배치할 수 있게 해줍니다.