Flutterで別ファイルからMaterialAppのlocaleを操作したい

Question

前提

（例）
Flutterでアプリ開発をしています。main.dartを別のファイルに2分割して、MaterialApp()が記述されていないほうのファイルからMaterialAppのlocaleを動的に変更したいです。

MaterialApp()がある方（main.dart）

//.....
import 'settings.dart';

void main() {
  runApp(NewApp());
}

String lang = "en";
class NewApp extends StatelessWidget {
  final title = "Tokage";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        locale: Locale(lang),
        localizationsDelegates: [
          AppLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: [
          const Locale('ja', ''),
          const Locale('en', ''),
        ],
        title: title,
        //.....
        home: new TokageHome());
  }
}

分割したもう一つの方（settings.dart）

//.....
import 'main.dart';

//prefはmain.dartでgetInstance()されています
late SharedPreferences pref;

class EnvironmentSettings extends StatefulWidget {
  EnvironmentSettings() : super();
  @override
  _EnvironmentState createState() => new _EnvironmentState();
}

class _EnvironmentState extends State<EnvironmentSettings> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(AppLocalizations.of(context)!.settings),
          actions: <Widget>[],
        ),
        body: ListView(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  padding: EdgeInsets.fromLTRB(100, 30, 0, 0),
                  child: Row(children: [
                    Text(
                      AppLocalizations.of(context)!.language,
                      style:
                          TextStyle(fontSize: 23, fontWeight: FontWeight.w300),
                    )
                  ]),
                ),
                Container(
                  padding: EdgeInsets.fromLTRB(0, 30, 100, 0),
                  child: DropdownButton<String>(
                    value: pref.getString("language"),
                    items: [
                      DropdownMenuItem(
                        child: Text(AppLocalizations.of(context)!.english),
                        value: "en",
                      ),
                      DropdownMenuItem(
                        child: Text(AppLocalizations.of(context)!.japanese),
                        value: "ja",
                      )
                    ],
                    onChanged: (value) {
                      changeSetting("language", value.toString());
                    },
                  ),
                  width: 200,
                )
              ],
            )
          ],
        ));
  }


  void changeSetting(String key, String value) {
    pref.setString(key, value);
    if(key == "ja"){
      //ここにlocaleを変数valueの値に変更するコードを書きたいです
    }
    setState(() {});
  }
}

バージョン

Flutter 3.3.8
Dart 2.18.4
を使っています。

初心者ですのでおかしい部分が多々あるかもしれませんが、教えていただけると大変うれしいです。

Answer 1

下記のように
ウィジェットツリーの上方で言語設定用の状態変数(localeStringOfApp)を保持する
↓
設定ページで設定された時にその状態変数をセットする関数を引数として渡していく(俗に言うバケツリレー)
と言う感じで動きました。よければ参考にされていください。
ウィジェットツリーのネストが多層になるとバケツリレー用のコードを書く労力が増える、などのデメリットが大きくなるので「状態管理用パッケージを使う」という流れになると思いますが、基本なのでこの方法は確認しておいた方がいいのかな、とは思います。

//https://github.com/flutter/website/blob/main/examples/internationalization/minimal/lib/main.dart
// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// The pubspec.yaml file must include flutter_localizations in its
// dependencies section. For example:
//
// dependencies:
//   flutter:
//     sdk: flutter
//   flutter_localizations:
//     sdk: flutter

import 'dart:async';

import 'package:flutter/foundation.dart' show SynchronousFuture;
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

class DemoLocalizations {
  const DemoLocalizations(this.locale);

  final Locale locale;

  static DemoLocalizations of(BuildContext context) {
    return Localizations.of<DemoLocalizations>(context, DemoLocalizations)!;
  }

  static const _localizedValues = <String, Map<String, String>>{
    'en': {
      'title': 'Hello World',
    },
    'es': {
      'title': 'Hola Mundo',
    },
    'ja': {
      'title': 'こんにちは',
    },
  };

  static List<String> languages() => _localizedValues.keys.toList();

  String get title {
    return _localizedValues[locale.languageCode]!['title']!;
  }
}

class DemoLocalizationsDelegate
    extends LocalizationsDelegate<DemoLocalizations> {
  const DemoLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) =>
      DemoLocalizations.languages().contains(locale.languageCode);


  @override
  Future<DemoLocalizations> load(Locale locale) {
    return SynchronousFuture<DemoLocalizations>(DemoLocalizations(locale));
  }

  @override
  bool shouldReload(DemoLocalizationsDelegate old) => false;
}

class DemoApp extends StatelessWidget {
  const DemoApp({
    super.key,
    required this.setter,
  });

  final void Function(String) setter;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(builder: (context) {
              return EnvironmentSettings(setter: setter);
            },),
          );
        },
      ),
      appBar: AppBar(
        title: Text(DemoLocalizations
            .of(context)
            .title),
      ),
      body: Center(
        child: Text(DemoLocalizations
            .of(context)
            .title),
      ),
    );
  }
}

class Demo extends StatefulWidget {
  const Demo({super.key});

  @override
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {

  void setLocaleStringOfApp(String newValue) {
    setState(() {
      localeStringOfApp = newValue;
    });
  }

  String localeStringOfApp = 'es';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //↓これでアプリの言語を決められる。
      //これを指定しない場合デバイスの言語設定を取ってくる。
      locale: Locale(localeStringOfApp, ''),
      onGenerateTitle: (context) =>
      DemoLocalizations
          .of(context)
          .title,
      localizationsDelegates: const [
        DemoLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', ''),
        Locale('es', ''),
        Locale('ja', ''),
      ],
      home: DemoApp(
        setter: setLocaleStringOfApp,
      ),
    );
  }
}

void main() {
  runApp(const Demo());
}

class EnvironmentSettings extends StatelessWidget {
  const EnvironmentSettings({
    Key? key,
    required this.setter,
  }) : super(key: key);

  final void Function(String) setter;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('言語設定'),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
                child: Text('日本語'),
                onPressed: () {
                  setter('ja');
                }
            ),
            SizedBox(height: 20.0,),

            ElevatedButton(
                child: Text('英語'),
                onPressed: () {
                  setter('en');
                }
            ),
            SizedBox(height: 20.0,),

            ElevatedButton(
                child: Text('スペイン語'),
                onPressed: () {
                  setter('es');
                }
            ),
            SizedBox(height: 20.0,),
            Text(DemoLocalizations
                .of(context)
                .title,
            ),
          ],
        ),
      ),
    );
  }
}

Comments

[RyuHo]

なるほど！このように関数を変数に入れてどんどん渡していくのですね！わかりやすかったです。
ありがとうございました。