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), // 기본 글씨 색상 변경
)
),
);
}
}
'플루터' 카테고리의 다른 글
Flutter chapter-05-04 BMI 계산 Slider Widget (0) | 2022.02.10 |
---|---|
Flutter chapter-05-03 BMI 계산 final, const 설명 및 쓰는 이유 (0) | 2022.02.10 |
Flutter chapter-05-01 BMI 계산 (0) | 2022.02.09 |
Flutter 설명 변경 (0) | 2022.02.08 |
Flutter chapter-04-04 OX퀴즈 showDialog 사용 (0) | 2022.02.08 |