Flutter chapter-05-02 BMI 계산 Theme 사용법(dark,light 모드)

Theme는 기본적으로 앱 기본 색상과 구성을 설정해주는 기능으로

MaterialApp 하단의 위치해있으며, 기본적으로 라이트 모드, 다크 모드 두 가지로 분류된다.

 

*ThemeData.dart() 현재 플루터 내부에 있는 기본적인 다크 모드로 변경하였다.

글씨 색생과 배경의 색상이 변경 되는 것을 확인할 수 있다.

ThemeData.light() 모드 현재 플루터 내부에 있는 기본적인 라이트 모드로 변경하였다.

글씨 색생과 배경의 색상이 변경 되는 것을 확인할 수 있다.

마지막으로 다크모드의 커스텀으로 내가 지정한 색상으로 변경하였으며, 그에 따라 다크 모드에서의 색상들도 내 맘대로 변경할 수 있는 것을 알 수 있다.

그렇다면 이를 통해서 우리는 앱의 모드를 손쉽게 버튼 하나로 변경 가능하다는 것 을 알 수 있다.

 

import 'package:flutter/material.dart';
import 'input.dart';

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

class BMICalc extends StatelessWidget {
  const BMICalc({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/input',
      routes: {
        '/input' : (context) => const Input(),
      },
      theme: ThemeData.dark().copyWith( // copyWith를 사용해서 다크 테마에서 내가 원하는 테마로 변경 가능하다.
          scaffoldBackgroundColor: Color(0xff0a0e21),//App의 scaffold의 백그라운드 색상이 변경된다.
          textTheme: const TextTheme(
            bodyText2: TextStyle(color: Colors.white), // 기본 글씨 색상 변경
          )
      ),
    );
  }
}