[Flutter] Scaffold

들어가며

Scaffold란?

• 앱의 기본 레이아웃을 구성하는데 사용된다
• 앱의 본문이나 상단 표시되는 부분, 사이드 내비게이션 메뉴 등을 관리할 대 사용된다

Scaffold 속성

• appBar: 일반적으로 화면 상단에 표시되는 앱 바로, 앱의 제목, 작업 메뉴 등을 포함
• body: 화면의 본문 영역으로, 주요 콘텐츠를 포함
• floatingActionButton: 일반적으로 화면 하단에 표시되는 부동 작업 버튼
• drawer: 앱의 사이드 네비게이션 메뉴를 제공
• bottomNavigationBar: 화면 하단에 표시되는 탐색을 위한 바
• snackBar: 화면 하단에 일시적인 메시지를 표시하는데 사용
• bottomSheet: 화면 하단에서 모달 형태의 추가 콘텐츠를 표시할 때 사용

예제

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scaffold Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 상단 앱바 영역
      appBar: AppBar(
        title: Text('Scaffold Example'),
      ),
      // 하단 바디 영역(SafeArea는 appBar가 없을 때 최상단 상태표시줄을 침범하지 않고 그 아래부터 영역이 노출되도록 보여주는 위젯)
      body: SafeArea(
        child: Text('Hello, Scaffold!'),
      ),
      // 최하단 플로팅 버튼
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          print("Hello");
        },
      ),
    );
  }
}

화면