[Flutter] 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(
      // MaterialApp으로 해주면 Text(); ->  방향 신경 안 써도 됨
      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 이벤트 핸들러 개념
          onPressed: () {
            print('1111111111');
          },
        ),
        drawer: Drawer(
          // ListView --> 게시판 목록.. 목록 만들 때 쓰는
          child: ListView(
            children: [
              ListTile(
                title: Text('Item 1'),
              ),
              ListTile(
                title: Text('Item 2'),
              ),
            ],
          ),
        ),
        // persistentFooterButtons: [
        //   Icon(Icons.settings),
        //   // SizedBox-->   눈에 보이진 않지만 사이즈 지정하라
        //   SizedBox(
        //     width: 50,
        //   ),
        //   Icon(Icons.person),
        // ],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          fixedColor: Colors.red,
          backgroundColor: Colors.blue,
          items: [
            BottomNavigationBarItem(
              label: '검색',
              icon: Icon(Icons.search_rounded),
            ),
            BottomNavigationBarItem(
              label: '홈',
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              label: 'My',
              icon: Icon(Icons.person),
            ),
          ],
        ),
      ),
    );
  }
}

// MaterialApp으로 해주면 Text(); ->  방향 신경 안 써도 됨

debugShowCheckedModeBanner: false, // 디버그 띠 제거

// 가운데 부분
body:

// () {} <-- 익명 함수 (dart 익명 클래스 개념은 없다)

// onPressed 이벤트 핸들러 개념
onPressed: () {
  print('1111111111');
},

// ListView --> 게시판 목록.. 목록 만들 때 쓰는
child: ListView(
  children: [
    ListTile(
      title: Text('Item 1'),
    ),
    ListTile(
      title: Text('Item 2'),
    ),
  ],
),

 // SizedBox-->   눈에 보이진 않지만 사이즈 지정하라