Scaffold

Scalffold

기본적인 앱의 화면 구성 요소 담는 컨테이너 위젯

Scalffold 구성요소

•

AppBar

•

Body

•

FloatingActionsButton

•

Drawer

•

BottomNavitaionBar

•

BottomSheet

AppBar (앱 바):

•

AppBar는 화면 상단에 위치하며, 앱의 제목이나 다양한 액션들을 포함할 수 있는 상단 바입니다.

Body (바디):

•

Body는 앱의 본문 내용을 담는 부분입니다. 주로 텍스트, 이미지, 리스트, 폼 등의 UI 요소들이 배치됩니다.

FloatingActionButton (플로팅 액션 버튼):

•

FloatingActionButton은 일반적으로 앱에서 자주 사용되는 주요 동작을 수행하는 버튼입니다. 주로 화면 하단에 위치하며, 눌렀을 때 특정 동작이 실행됩니다.

Drawer (드로어):

•

Drawer는 화면 좌측에서 우측으로 나타나는 사이드 메뉴를 제공합니다. 주로 네비게이션 메뉴나 설정 메뉴 등을 담습니다.

BottomNavigationBar (하단 네비게이션 바):

•

BottomNavigationBar는 화면 하단에 위치하며, 여러 개의 화면으로 이동하는 탭을 제공합니다.

BottomSheet (하단 시트):

•

BottomSheet는 화면 하단에서 나타나는 부가적인 정보를 담는 UI 요소입니다.

Scaffold 예시

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // App Bar
      appBar: AppBar(
        title: Text('My App'),
      ),
      // Body
      body: const Center(
        child: Text('Hello Flutter~!'),
      ),
      // floatingActionsButton
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('click!');
        },
        child: const Icon(Icons.person),
      ),
      // drawer (사이드바)
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text("메뉴 목록"),
            ),
            ListTile(
              title: const Text('메뉴 1'),
              onTap: () { print('click menu1!'); },
            ),
            ListTile(
              title: const Text('메뉴 2'),
              onTap: () { print('click menu2!'); },
            ),
          ],
        ),
      ),
      // BottomNavitaionBar
      bottomNavigationBar: BottomNavigationBar(
        // 아이템 2개 이상
        items: const [
           BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'user',
          ),
        ],
      ),

      // BottomSheet
      bottomSheet: Container(
        height: 20,
        color: Colors.grey,
        child: const Center(child: Text('Bottom')),
      ),

    );
  }

}
Dart
복사