[펫버틀러] 반려 동물 고민 상담 앱 - 개발 16 일차 (Dark 테마적용)

• 앱을 사용하다보면 주로 다크테마를 쓰게되는데 아무래도 눈의 피로가 덜한것같다.
• 그래도 플러터 전체적으로 dart 테마를 적용하는 방법을 찾아서 적용했다.
• 적용을 위해 설정페이지를 이용하기로 했다.

• prefs -> SharedPreferences 를 참조해서 저장하고 가져온다.

• main.dart 페이지에 적용한모습

• main.dart에 그냥 클래스를 추가하기로 했다.
• 아래처럼 필요한걸 넣어서 만들었다

const Color customMagenta50 = Color(0xfffcd5ce);
const Color customMagenta100 = Color(0xfffaac9d);
const Color customMagenta300 = Color(0xfff8836c);
const Color customMagenta400 = Color(0xfff65a3b);

const Color customMagenta900 = Color(0xfff4310a);
const Color customMagenta600 = Color(0xffc32708);

const Color customErrorRed = Color(0xFFC5032B);

const Color customSurfaceWhite = Color(0xFFFFFBFA);
const Color customBackgroundWhite = Colors.white;
const ColorScheme _customColorScheme = ColorScheme(
  primary: customMagenta50,
  primaryVariant: customMagenta600,
  secondary: Colors.amber,
  secondaryVariant: customMagenta400,
  surface: Colors.purpleAccent,
  background: customSurfaceWhite,
  error: customMagenta900,
  onPrimary: Colors.red,
  onSecondary: Colors.deepOrange,
  onSurface: customMagenta300,
  onBackground: customMagenta100,
  onError: Colors.redAccent,
  brightness: Brightness.light,
);

class ThemeNotifier with ChangeNotifier {
  final darkTheme = ThemeData(
    bottomNavigationBarTheme: BottomNavigationBarThemeData(
      backgroundColor: Colors.grey[900],
      elevation: 10,
      selectedLabelStyle: TextStyle(
          color: Color(0xFFA67926), fontFamily: 'Montserrat', fontSize: 14.0),
      unselectedLabelStyle: TextStyle(
          color: Colors.grey[600], fontFamily: 'Montserrat', fontSize: 12.0),
      selectedItemColor: Color(0xFFA67926),
      unselectedItemColor: Colors.grey[600],
      showUnselectedLabels: true,
    ),
    primarySwatch: Colors.grey,
    primaryColor: Colors.black,
    backgroundColor: const Color(0xFF212121),
    dividerColor: Colors.black12,
    primaryColorLight: Colors.white,
    indicatorColor: Color(0xff0E1D36),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.red, // Button color
        foregroundColor: Colors.white, // Text color
      ),
    ),
    hintColor: Color(0xff280C0B),
    highlightColor: Color(0xff372901),
    hoverColor: Color(0xff3A3A3B),
    focusColor: Color(0xff0B2512),
    disabledColor: Colors.grey,
    cardColor: Color(0xFF151515),
    canvasColor: Colors.black,
    colorScheme: _customColorScheme,
    appBarTheme: AppBarTheme(
      elevation: 0.0,
    ),
    textSelectionTheme: TextSelectionThemeData(selectionColor: Colors.white),
  );

  static const ColorScheme _customColorSchemelight = ColorScheme(
    primary: customMagenta50,
    secondary: Colors.amber,
    surface: Colors.purpleAccent,
    background: customSurfaceWhite,
    error: customMagenta900,
    onPrimary: Colors.red,
    onSecondary: Colors.deepOrange,
    onSurface: customMagenta300,
    onBackground: customMagenta100,
    onError: Colors.redAccent,
    brightness: Brightness.light,
  );
  final lightTheme = ThemeData(
    bottomNavigationBarTheme: BottomNavigationBarThemeData(
      backgroundColor: Colors.grey[900],
      elevation: 10,
      selectedLabelStyle: TextStyle(
          color: Color(0xFFA67926), fontFamily: 'Montserrat', fontSize: 14.0),
      unselectedLabelStyle: TextStyle(
          color: Colors.grey[600], fontFamily: 'Montserrat', fontSize: 12.0),
      selectedItemColor: Color(0xFFA67926),
      unselectedItemColor: Colors.grey[600],
      showUnselectedLabels: true,
    ),
    primarySwatch: Colors.grey,
    primaryColor: Colors.white,
    backgroundColor: const Color(0xFFE5E5E5),
    dividerColor: Colors.white54,
    indicatorColor: Color(0xffCBDCF8),
    primaryColorLight: Colors.black,
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.red, // Button color
        foregroundColor: Colors.white, // Text color
      ),
    ),
    hintColor: Color(0xffEECED3),
    highlightColor: Color(0xffFCE192),
    hoverColor: Color(0xff4285F4),
    focusColor: Color(0xffA8DAB5),
    disabledColor: Colors.grey,
    cardColor: Colors.white,
    canvasColor: Colors.grey[50],
    colorScheme: _customColorSchemelight,
    appBarTheme: AppBarTheme(
      elevation: 0.0,
    ),
    textSelectionTheme: TextSelectionThemeData(selectionColor: Colors.black),
  );

  late ThemeData _themeData;
  ThemeData getTheme() => _themeData;

  ThemeNotifier(var themeMode) {
    if (themeMode) {
      _themeData = darkTheme;
    } else {
      print('setting dark theme');
      _themeData = lightTheme;
    }
    notifyListeners();
  }

  void setDarkMode() async {
    _themeData = darkTheme;
    notifyListeners();
  }

  void setLightMode() async {
    _themeData = lightTheme;
    notifyListeners();
  }
}

전체 페이지에 적용되는것을 볼수있다.