Flutter - 스마트폰 테마 적용하기

스마트폰의 테마 설정 변경에 따라 Flutter 앱도 폰 테마에 따라가게 설정해 보겠습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Test App',
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark
      ),
      home: Test(),
    );
  }
}

코드는 간단합니다.

theme: ThemeData(

    brightness: Brightness.light

)

스마트폰의 Light테마(그냥 일반적인 평소에 늘 보는 화면)가 선택되면 이쪽에서 실행됩니다.

 

darkTheme: ThemeData(

    brightness: Brightness.dark

)

Dark 테마 선택 시 이쪽에서 자동 변경해 줍니다.

 

마지막으로 오른쪽 상단의 Debug 띠 숨기기

debugShowCheckedModeBanner: false