MaterialApp

Material Design을 기반으로 설계된, 플러터에서 제공하는 최상위 위젯

앱의 기본 설정과 기능을 제공하며, 앱의 전체적인 디자인을 관리합니다.

기본 설정

•

제목: 앱의 제목을 설정합니다.

•

테마: 앱의 전체적인 디자인을 관리합니다.

•

페이지 이동 경로: 앱의 페이지 이동 경로를 설정합니다.

•

디버그 모드: 디버그 모드를 활성화합니다.

Material Design : 구글에서 제공하는 디자인 가이드라인으로, 앱의 사용자 경험을 향상시키기 위한 일련의 지침을 제공합니다.

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

https://m3.material.io/

MaterialApp 의 주요 위젯

위젯	설명
Scaffold	앱의 기본 구조를 제공하는 위젯
AppBar	앱의 상단에 표시되는 위젯
Body	앱의 주요 내용을 포함하는 위젯
BottomNavigationBar	앱의 하단에 표시되는 위젯
FloatingActionButton	화면에 떠다니는 버튼
TabBar	탭을 제공하는 위젯

MaterialApp

앱의 기본 설정과 테마(디자인)를 관리하는 최상위 위젯

속성

속성	설명
title	앱의 제목을 설정합니다.
theme	앱의 테마를 설정합니다.
routes	앱의 페이지 이동 경로를 설정합니다.
initialRoute	앱을 처음 시작할 때 표시할 페이지를 설정합니다.
debugShowCheckedModeBanner	디버그 모드를 활성화합니다.

Scaffold

앱의 기본 구조를 제공하는 위젯

AppBar, Body, BottomNavigationBar 등을 포함할 수 있습니다.

속성

속성	설명
appBar	앱바를 설정합니다.
body	앱의 주요 내용을 설정합니다.
floatingActionButton	플로팅 액션 버튼을 설정합니다.
bottomNavigationBar	바텀 네비게이션 바를 설정합니다.
tabBar	탭 바를 설정합니다.

AppBar

앱의 상단에 표시되는 위젯

제목, 메뉴, 앱바 버튼 등을 포함할 수 있습니다.

속성

속성	설명
title	앱의 제목을 설정합니다.
leading	앱바의 왼쪽에 표시되는 위젯을 설정합니다.
actions	앱바의 오른쪽에 표시되는 위젯을 설정합니다.
backgroundColor	앱바의 배경색을 설정합니다.
brightness	앱바의 밝기를 설정합니다.
elevation	앱바의 높이를 설정합니다.

Body

앱의 주요 내용을 포함하는 위젯

속성

속성	설명
child	앱의 주요 내용을 설정합니다.

BottomNavigationBar

앱의 하단에 표시되는 위젯

: 앱의 하단에 표시되는 위젯입니다. 앱의 주요 기능에 대한 버튼을 포함할 수있습니다.

속성

속성	설명
items	바텀 네비게이션 바에 표시되는 항목을 설정합니다.
currentIndex	바텀 네비게이션 바의 현재 항목의 인덱스를 설정합니다.

FloatingActionButton

화면 위에 떠있는 버튼 위젯

속성

속성	설명
child	버튼의 아이콘이나 이미지를 설정합니다.
onPressed	버튼을 클릭했을 때 호출되는 함수를 설정합니다.

TabBar

탭을 제공하는 위젯

속성	설명
tabs	탭을 설정합니다.

예시코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: TabBarView(
          children: [
            Container(color: Colors.red),
            Container(color: Colors.green),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
          ],
          currentIndex: 0,
          onTap: (int index) {
            // 탭이 변경될 때 호출되는 함수
          },
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            // 플로팅 액션 버튼이 클릭될 때 호출되는 함수
          },
        ),
      ),
    );
  }
}
Dart
복사