Flutter Scaffold

Flutter에서 화면 구성을 위해 많이 사용하는 위젯 중 하나가 Scaffold입니다. Scaffold는 일반적인 Material Design 앱의 구조를 구현하기 위해 사용되는 위젯으로, 앱의 상단 바, 하단 바, 드로어 메뉴, 바텀 시트 등을 구성할 수 있습니다.

Scaffold는 다양한 구성 요소를 가지고 있습니다. 예를 들어, 상단 바는 appbar 프로퍼티를 통해 설정할 수 있으며, 바텀 시트는 bottomSheet 프로퍼티를 통해 설정할 수 있습니다. 그리고 floatingActionButton, drawer, body 등의 프로퍼티도 가지고 있습니다.

다음은 Scaffold를 사용하여 화면을 구성하는 간단한 예시입니다.

 

반응형

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
     home: Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Text('Hello, world!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    ));
  }
}

이 예시에서는 상단 바로 'My App'을 표시하고, 중앙에 'Hello, world!'를 표시하는 화면을 구성하였습니다. 또한, FloatingActionButton을 추가하여 클릭할 때마다 새로운 항목을 추가할 수 있도록 구성하였습니다.

Scaffold를 사용하면 간단하게 앱의 기본 구성 요소들을 구성할 수 있으며, 이를 활용하여 원하는 화면을 구성할 수 있습니다.

다음은 Scaffold의 주요 프로퍼티들입니다.

• appBar: 상단 바를 구성하는 프로퍼티입니다. title, actions 등의 하위 프로퍼티를 가지고 있습니다.
• body: 화면의 중앙에 표시되는 내용을 구성하는 프로퍼티입니다.
• floatingActionButton: 화면의 오른쪽 하단에 표시되는 부동 작업 버튼을 구성하는 프로퍼티입니다.
• drawer: 왼쪽에서 나오는 드로어 메뉴를 구성하는 프로퍼티입니다.
• bottomNavigationBar: 하단 바를 구성하는 프로퍼티입니다.
• bottomSheet: 화면 하단에서 나오는 바텀 시트를 구성하는 프로퍼티입니다.
• backgroundColor: Scaffold의 배경색을 설정하는 프로퍼티입니다.
• resizeToAvoidBottomInset: 키보드가 열릴 때 화면이 자동으로 조정되는지 여부를 설정하는 프로퍼티입니다.
• extendBody: body가 하단 바까지 확장되는지 여부를 설정하는 프로퍼티입니다.

위 프로퍼티 외에도 다양한 프로퍼티를 가지고 있으며, 이를 조합하여 다양한 화면을 구성할 수 있습니다.

또한, Scaffold는 상태를 가지고 있습니다. 예를 들어, 화면을 회전하거나, 키보드가 열리거나, 다른 액티비티로 이동하는 등의 상황에서도 Scaffold는 그 상황에 맞게 자동으로 크기를 조정하고 화면을 구성합니다. 이를 통해, 개발자는 화면 구성에 더 집중할 수 있습니다.