공부하다 배운 Flutter 꿀팁 무작정 적어두기 (7)

###### 다크모드 설정 방법 ######

1. main.dart에서 MaterialApp 위젯 내에 themeMode를 세팅한다.
themeMode 속성값은 dark, light, system이 있고 system은 앱이 실행되는 기기의 환경에 맞춰 라이트모드, 다크모드를 설정하는 앱이다.

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TikTok Clone',
      themeMode: ThemeMode.system,

2. theme 속성에 light모드의 theme 정보와 dark모드의 darkTheme 정보를 세팅한다. 여기서 brightness 속성값을 통해 기본 칼라를 설정할 수도 있음!

3. 이때 시스템의 다크모드 상태에 따라 다른 디자인을 적용할 수 있도록 utils.dart를 생성해 다음과 같이 세팅한다.

import 'package:flutter/material.dart';

bool isDarkMode(BuildContext context) =>
    MediaQuery.of(context).platformBrightness == Brightness.dark;

4.  경우에 따라 어떤 디자인을 적용할지 세팅한다. theme 자체를 적용할 때는 다음과 같이 theme 속성에 세팅하면 된다.

theme: ThemeData(
        bottomAppBarTheme: BottomAppBarTheme(
          color:
              isDarkMode(context) ? Colors.grey.shade900 : Colors.grey.shade50,
        ),
        brightness: Brightness.light,
        scaffoldBackgroundColor: Colors.white,
        primaryColor: const Color(0xFFE9435A),
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: Color(0xFFE9435A),
        ),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
          elevation: 0,
          titleTextStyle: TextStyle(
            color: Colors.black,
            fontSize: Sizes.size16 + Sizes.size2,
            fontWeight: FontWeight.w600,
          ),
        ),
        navigationBarTheme: const NavigationBarThemeData(
          backgroundColor: Colors.white,
        ),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        bottomAppBarTheme: BottomAppBarTheme(
          color: Colors.grey.shade900,
        ),
        brightness: Brightness.dark,
        scaffoldBackgroundColor: Colors.black,
        primaryColor: const Color(0xFFE9435A),
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: Color(0xFFE9435A),
        ),
      ),

5. 화면단에 경우에 따라 하드코딩을 하고 싶을 때는 아래와 같이 세팅할 수 있다. light모드일 경우에만 하드코딩을 하고 싶을 경우 dark모드인 경우에만 null을 세팅해 theme 데이터를 찾아가게 하고, light모드인 경우에는 하드코딩 값을 따라가도록 코딩한 예!

  bottomNavigationBar: BottomAppBar(
            elevation: 2,
            color: isDarkMode(context) ? null : Colors.grey.shade50,

---

theme 데이터에 텍스트의 사이즈, 굵기, 색상 등이 다 설정돼 있는데 디자인에는 일부 theme 데이터만 적용하고 싶다면? 아래와 같이 "copyWith"를 붙여서 사용하면 된다.

style: Theme.of(context).textTheme.headlineSmall!.copyWith(color: Colors.red),

---

Material3를 마이그레이션 할 때 BottomAppBar가 안 먹으면 Container로 바꿔주면 된다!

---

flex color scheme 패키지 강추!!

 

 

출처

노마드 코더 유료 강의

(광고 아니고 진심 강추입니다!!)