flutter_localizations implementation update

Question

I have program which now changes language to desired in cache using shared_preferences and when I open again program it will use language which i selected, but i want to make that my program would automatically change when i select different language. So it should somehow update and be in the same page. I am using riverpod for state management.

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends ConsumerStatefulWidget {
  const MyApp({
    super.key,
  });

  @override
  ConsumerState<MyApp> createState() => _MyAppState();
}

class _MyAppState extends ConsumerState<MyApp> {
  final _locale = StateProvider<Locale>((ref) {
    return new Locale('lt');
  });
  @override
  void initState() {
    super.initState();
    this._fetchLocale().then((locale) {
      ref.read(_locale.notifier).state = locale;
    });
  }

  Future<Locale> _fetchLocale() async {
    var prefs = await SharedPreferences.getInstance();
    String languageCode = prefs.getString('selectedLanguage') ?? 'en';
    debugPrint(languageCode);
    return Locale(languageCode);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onPanDown: (_) {
        FocusManager.instance.primaryFocus?.unfocus();
      },
      child: MaterialApp.router(
        locale: ref.watch(_locale),
        localizationsDelegates: [
          S.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: S.delegate.supportedLocales,
        title: 'Jonizatorius',
        theme: ThemeData(
          primaryColor: kPrimaryColor,
        ),
        routerConfig: router,
        // home: CheckFirstTimeScreen(),
      ),
    );
  }
}

selector.dart

DropdownButton(
                    value: sellected_language,
                    items: languages.map((e) {
                      return DropdownMenuItem(
                        child: Text(e),
                        value: e,
                      );
                    }).toList(),
                    onChanged: (val) async {
                      print(val);
                      SharedPreferences prefs = await SharedPreferences.getInstance();
                      await prefs.setString('selectedLanguage', val.toString());
                    },
                  )

I tried looking up internet, but didn't find someone using riverpod,only outdated data i found.

score 0 · Answer 1 · answered Jun 20 '23 at 12:00

First, take your variable to the top level:

static final localeProvider = StateProvider<Locale>((ref) {
  return Locale('lt');
});

Next, in the callback of your button, update the provider value:

onChanged: (val) async {
  ref.read(localeProvider.notifier).update((_) => val); 

  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString('selectedLanguage', val.toString());
},

Otherwise, your code should work as expected.

flutter_localizations implementation update

1 Answers1