깡샘의 플러터&다트 프로그래밍 13-1

MaterialApp

머티리얼 디자인을 적용하는 위젯이다. -> 안드로이드 앱

• 타이틀, 테마, 라우팅 정보 등을 설정 가능하다.

---

디버그 배너 보이기 - debugShowCheckedModeBanner

• 화면 오른쪽 위에 DEBUG라는 배너 출력 설정
  • debugShowCheckedModeBanner: false -> 안나옴

---

테마 설정하기 - Theme

• 기본 색상 설정 가능(Default는 blue)

• theme: ThemeData(
      primarySwatch: Colors.pink, //기본 색상 pink 설정
      appBarTheme: const AppBarTheme(
        backgroundColor: Colors.orange, //appBar 배경 색은 오렌지로 할게요 
        foregroundColor: Colors.black, //특정 위젯 색상 설정 가능
      ),
    ),

---

머티리얼 디자인 활용하기

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.pink,
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.orange,
          foregroundColor: Colors.black,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('practice'),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            children: [
              const SizedBox(
                height: 20,
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text(
                  'Button',
                ),
              ),
              Checkbox(
                value: true,
                onChanged: (value) {},
              ),
              const Text(
                'Hello world',
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}