[개발] #04 다크모드, 즐겨찾기 업데이트

<Fig. 01>

<Fig. 02>

<Fig. 03>

 

다크모드 및 즐겨찾기 기능 구현 완료했습니다.

이로써 목표했던 모든 기능 구현이 완료되었습니다.

 

 

구현 방법

- 다크모드

다크모드는 Flutter에서 제공하는 Theme 기능을 이용해서 구현했습니다.

MaterialApp.router(
  routerConfig: _router,
  title: 'Arkhive',
  theme: state.settings.isDarkTheme == true
      ? ThemeData(
          scaffoldBackgroundColor: const Color(0xff282828),
          primaryColor: const Color(0xff313131),
          shadowColor: const Color(0xff111111),
          textTheme: TextTheme(
            bodyMedium: TextStyle(color: Colors.blueGrey.shade400),
            bodySmall: const TextStyle(color: Color(0xffe5e5e5)),
            labelMedium: const TextStyle(color: Colors.grey),
            labelSmall: TextStyle(color: Colors.grey.shade500),
          ),
        )
      : ThemeData(
          scaffoldBackgroundColor: const Color(0xffefefef),
          primaryColor: const Color(0xfff5f5f5),
          shadowColor: const Color(0xff999999),
          textTheme: TextTheme(
            bodyMedium: TextStyle(color: Colors.blueGrey.shade800),
            bodySmall: const TextStyle(color: Colors.black87),
            labelMedium: const TextStyle(color: Colors.black54),
            labelSmall: TextStyle(color: Colors.grey.shade700),
          ),
        ),
  debugShowCheckedModeBanner: false,
);

 

사용할 색상을 미리 ThemeData에 정의합니다.

그리고 전역적으로 관리되는 SettingCuibt의 state에 의해 테마를 설정합니다.

(위의 경우는 settings.isDartTheme로 관리됩니다)

 

그리고, 테마에 의해 색상이 결정되어야 하는 위젯의 color는 

Theme.of(context).<attr>로 설정하여 색상이 실시간으로 변경됩니다.

 

 

- 즐겨찾기

HydratedCubit으로 즐겨찾기를 관리하게 됩니다.

즐겨찾기에 사용되는 모델을 아래와 같이 구성하였는데, 그 이유는 다음과 같습니다.

@JsonSerializable()
class FavoriteModel extends Equatable {
  final String? key;
  final String? iconId;
  final String? name;
  final String? diffGroup, difficulty; // only stage
  final FavorCategory? category;
...

 

key: 식별자, id값이 들어갑니다.
iconId: 이미지 표시에 필요한 이미지 id값입니다.
name: 이름입니다
diffGroup, difficulty: 스테이지의 세부 정보를 위한 요소입니다.
category: 오퍼레이터, 적, 아이템, 스테이지를 구분하기 위한 enum입니다.

 

이 객체(모델)를 추가/삭제 하는 방식으로 즐겨찾기를 관리합니다.

 

 

TroubleShooting
다크모드를 개발하는데 있어 150개 이상의 위젯 color값을 변경하는 과정은 정말..

엄청난 노가다였습니다.

하지만, 다크모드를 이보단 간단히 구현할 방법은 없을 것입니다.

 

즐겨찾기를 개발하는데 있어 FavoriteModel에 들어가야할 데이터를 추출하는 과정에서

약간의 trade-off가 있었습니다.

key, category만 추가하고, 나머지 필요한 데이터는 화면에 표시하는 과정에서

비동기로 가져올지 (사용자는 로딩 화면을 보게됨)

또는 위젯간 의존성이 커지는대신, 필요한 데이터를 모두 넘겨줄지 (유지보수가 힘들어짐)

 

제 결론은, 유저 편의성을 위해 위젯간 의존성을 늘리는 방안을 채택했습니다.

 

 

+ 보너스

icon과, native 수준에서의 splash 화면도 변경했습니다.

flutter_native_splash | Flutter Package

갓갓 라이브러리..