본문 바로가기
공부방/Flutter

[Flutter] Scaffold()함수(위젯)

by SmartCow 2024. 2. 27.

1. Scaffold함수(위젯)이란?

Flutter에서 Scaffold 위젯은 앱의 기본적인 구조를 나타내는 뼈대를 제공하는 중요한 위젯 중 하나이다. 이를 통해 앱의 주요 구성 요소를 배치하고 관리할 수 있다. Scaffold 위젯은 Material Design의 레이아웃 구조를 따르며, 다양한 구성 요소를 포함할 수 있다.

2. 주요속성

1) appBar
AppBar 위젯을 포함하는 속성. 앱 상단에 표시되는 타이틀, 액션 버튼 등을 설정할 수 있다.

2) body
앱의 주요 콘텐츠를 표시하는 위젯을 지정하는 속성. 보통 이곳에는 페이지의 내용이나 다른 중요한 위젯이 위치한다.

3) floatingActionButton
주로 메인 화면에서 사용되며, 스크롤과 함께 움직이는 부동 액션 버튼을 지정하는 속성. 보통 사용자에게 주요한 기능을 제공하는 버튼이 위치한다.

4) drawer
네비게이션 드로어(사이드 메뉴)를 지정하는 속성. 주로 앱의 주요 메뉴나 네비게이션 링크를 포함한다.

5) bottomNavigationBar
앱 하단에 표시되는 네비게이션 바를 설정하는 속성. 다중 페이지 앱에서 다른 페이지로의 전환을 할 때 사용된다.

6) backgroundColor
Scaffold의 배경색을 설정하는 속성

7) resizeToAvoidBottomInset
키보드가 나타날 때 화면을 자동으로 조절하는 동작을 설정하는 속성. 기본값은 true이며, 키보드가 나타날 때 화면을 위로 밀어 올려 입력 필드를 가리지 않도록 조절한다.

8) extendBody
true로 설정하면 body 속성에 지정된 위젯을 bottomNavigationBar까지 확장시킨다.

3. 기본적인 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('My App'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

Scaffold의 기본적인 구성요소만 사용된 예제.
앱 바에는 'My App'이라는 제목이 표시되며, 본문에는 'Hello, World!'라는 텍스트가 가운데 정렬되어 표시된다.