플러터 기본기 다지기 - MaterialApp과 property

MaterialApp의 주요 property와 사용법

• theme: 앱의 전체 테마, 색상 구성 등이 포함 (예, theme: ThemeData(primarySwatch: Colors.red))
• home: 앱이 시작할 때 보여질 기본 경로 또는 위젯

Scaffold 위젯 사용법과 주요 property

• MaterialApp 내에서 머티리얼 디자인의 기본 레이아웃 구조를 제공하는 위젯
• 주요 property
  • appBar: 화면의 상단에 있는 앱 바.
    • 보통 value로 AppBar(title: const Text('FunCoding'))와 같이 AppBar 위젯을 넣는 경우가 많음
  • body: 화면의 기본 내용, 일반적으로 위젯의 목록.
  • floatingActionButton: 인터페이스에 위치한 추가 버튼.
    • floatingActionButtonLocation: 부가 버튼의 위치.
  • drawer: Scaffold 위젯의 사이드 메뉴.
  • persistentFooterButtons: 화면 하단에 표시되는 버튼의 행.
  • bottomNavigationBar: 화면 하단에 표시되는 네비게이션 바.
  • backgroundColor: 스캐폴드의 배경색.
  • resizeToAvoidBottomInset: 스크린 키보드를 피하기 위해 body의 크기를 자동으로 조정할지 여부를 설정 (디폴트: true)

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.orange),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Co Burn Studio'),
          backgroundColor: Colors.orange,
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(120.0),
            child: TextField(
              decoration: InputDecoration(labelText: '입력요망'),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          elevation: 5.0,
          child: Icon(Icons.add),
          // () {} <-- 익명 함수 (dart 익명 클래스 개념은 없다)
          onPressed: () {
            print("111111111111111111111");
          },
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              ListTile(
                title: Text("Item 1"),
              ),
              ListTile(
                title: Text("Item 2"),
              ),
            ],
          ),
        ),
        // persistentFooterButtons: [
        //   Icon(Icons.settings),
        //   SizedBox(width: 50),
        //   Icon(Icons.person),
        // ],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          fixedColor: Colors.green,
          backgroundColor: Colors.red,
          items: [
            BottomNavigationBarItem(
              label: '검색',
              icon: Icon(Icons.search_rounded),
            ),
            BottomNavigationBarItem(
              label: '홈',
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              label: 'My',
              icon: Icon(Icons.person),
            ),
          ],
        ),
      ),
    );
  }
}