인프런 커뮤니티 질문&답변

안녕하세요.

먼저 context.read와 context.watch의 차이점은 다음과 같습니다.

• context.read : notifyListeners를 호출해도 BuildContext가 소속된 Widget을 갱신 안함

• context.watch : notifyListeners를 호출하는 경우 BuildContext가 소속된 Widget을 갱신함

아래 SettingBottomSheet 코드를 보면, LanguageService는 context.watch로 접근하고 있기 때문에 toggleLang에서 notifyListeners 호출시 갱신됩니다.

class SettingBottomSheet extends StatelessWidget {
  const SettingBottomSheet({super.key});

  @override
  Widget build(BuildContext context) {
    final bool isLightTheme = context.theme.brightness == Brightness.light;
    final LangService langService = context.watch();
    return BaseBottomSheet(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          /// Theme Tile
          Tile(
            icon: isLightTheme ? 'sunny' : 'moon',
            title: S.current.theme,
            subtitle: isLightTheme ? S.current.light : S.current.dark,
            onPressed: context.read<ThemeService>().toggleTheme,
          ),

          /// Lang Tile
          Tile(
            icon: 'language',
            title: S.current.language,
            subtitle: IntlHelper.isKo ? S.current.ko : S.current.en,
            onPressed: langService.toggleLang,
          ),
        ],
      ),
    );
  }
}

ThemeService는 context.theme.brightness로 접근하고 있는데, theme_service.dart 파일에 ThemeServiceExt를 보면, 결국 context.watch<ThemeService>().theme.brightness와 동일한 코드이므로 마찬가지로 toggleTheme 함수에서 notifyListeners 호출시 위젯이 갱신됩니다.

extension ThemeServiceExt on BuildContext {
  ThemeService get themeService => watch<ThemeService>();
  AppTheme get theme => themeService.theme;
  AppColor get color => theme.color;
  AppDeco get deco => theme.deco;
  AppTypo get typo => theme.typo;
}

감사합니다 :)