Zenn
🌏

【Flutter】RiverpodのProviderでL10nを扱う

2023/02/12に公開
Flutter
Riverpod
l10n
tech

はじめに

L10n対応する際に、View側のコードにどうしてもロジック部分を書かざる得ないということがあります。
そこで、ロジック部分を書くファイル内でもL10nを使用するために、RiverpodのProviderを使用して実装する方法をご紹介したいと思います。

今回の記事では、L10nを適用する方法は説明しないので、そこが分からない方は以下の記事を参考にしてみてください。
https://zenn.dev/reinf0rce/articles/618938598fc4dd

結論

app_localition_provider.dart
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'app_localization.dart';

final appLocalizationProvider = Provider<AppLocalization>((ref) {
  ref.state = lookupAppLocalization(ui.window.locale); // デフォルトのL10n
  final observer = _LocaleObserver((locales) {
    ref.state = lookupAppLocalization(ui.window.locale); // 設定した言語のL10nに更新する
  });
  final binding = WidgetsBinding.instance;
  binding.addObserver(observer); // 言語切替検知の開始
  ref.onDispose(() => binding.removeObserver(observer));
  return ref.state;
});

/// 言語切替を検知するためのオブザーバー
class _LocaleObserver extends WidgetsBindingObserver {
  _LocaleObserver(this._didChangeLocales);

  final void Function(List<Locale>? locales) _didChangeLocales;

  @override
  void didChangeLocales(List<Locale>? locales) {
    _didChangeLocales(locales);
  }
}

使用例

main.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:l10n_with_riverpod_example/l10n/app_localization_provider.dart';

import 'l10n/app_localization.dart';

void main() {
  runApp(
    const ProviderScope(
      child: App(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
      localizationsDelegates: AppLocalization.localizationsDelegates,
      supportedLocales: AppLocalization.supportedLocales,
    );
  }
}

class HomePage extends ConsumerWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final l10n = ref.watch(appLocalizationProvider);
    return Scaffold(
      body: Center(
        child: Text(l10n.hello),
      ),
    );
  }
}

GitHubにコードをアップしたので気になる方はどうぞ
https://github.com/f-nakahara/l10n-with-riverpod-example

Discussion