[Flutter] Theme Provider

Theme의 색상을 변경해주는 아주 훌륭한 라이브러리

 

add

flutter pub add theme_provider

 

 

MaterialApp을 실행하는 로직에 ThemeProvider를 감싼다.

@override
Widget build(BuildContext context) {
  return ThemeProvider(
    child: ThemeConsumer(
      child: Builder(
        builder: (themeContext) => MaterialApp(...)
      )
    )
  )
}

 

 

ThemeProvider내부에 사용할 테마들을 등록한다.

파라메터는 세 가지만 사용하면 된다.

- saveThemeOnChange : 변경한 테마를 저장할 것인지

- onInitCallback : 최초 테마 선택

- themes : 사용한 테마들 모음

 

controller.forgetSavedTheme() 함수를 사용하면 저장된 테마를 삭제시킨다.

    return ThemeProvider(
      saveThemesOnChange: true,
      onInitCallback: (controller, previouslySavedThemeFuture) async {
        String? savedTheme = await previouslySavedThemeFuture;
        if (savedTheme != null) {
          controller.setTheme(savedTheme);
        } else {
          final view = View.of(context);
          Brightness platformBrightness = view.platformDispatcher.platformBrightness;
          switch (platformBrightness) {
            case Brightness.dark: controller.setTheme('dark');
            case Brightness.light: controller.setTheme('light');
            default: controller.setTheme('default');
          }*/
			controller.forgetSavedTheme();
        }
      },
      themes: <AppTheme>[
        AppTheme.light(id: ThemeConstant.light),
        AppTheme.dark(id: ThemeConstant.dark),

 

 

외부에서 테마를 변경하고 싶은 경우

Themes에 등록한 태그 아이디를 등록하면 된다.

ElevatedButton(
  onPressed: () {
    ThemeProvider.controllerOf(context).setTheme(ThemeConstant.basic);
  },
  child: Text("default"),
),
ElevatedButton(
  onPressed: () {
    ThemeProvider.controllerOf(context).forgetSavedTheme();
  },
  child: Text("forget"),
)