FlutterのScaffoldを返すクラスにおいて、日本語化をするためのlocalizationを実装することはできないでしょうか？

前提

Flutterを使用してアプリケーションを作成しています。
その中で日付を選択する機能を持たせたいのですが、
カレンダーを表示させて選択できるように、showDatePickerを使ってみました。

しかしカレンダーを実装するページは、あるMaterialAppページから派生させたScaffoldのみを返すページとして作っていました。
結果として、「MaterialAppが見つからない（Scaffoldの中ではlocalization delegatesが設定できない）」という内容のエラーが出ています。

どうにか実装させることはできないでしょうか？

実現したいこと

カレンダー選択後の日付を日本語で表示させたい。

・以下キャプチャ1枚目のボタンをクリックして、カレンダーを表示。

・2枚目のキャプチャで、カレンダーから日付を選択。（ここの日本語化はできました。）

・3枚目のキャプチャで、選択した日付を日本語で画面表示させたい。

発生している問題・エラーメッセージ

該当のソースコード

dart
1  @override
2  Widget build(BuildContext context) {
3    return Scaffold(
4        appBar: AppBar(
5          title: const Text("●●●●"),
6        ),
7        body: Column(children: <Widget>[
8
9          Expanded(
10            child: SingleChildScrollView(
11              child: Form(
12                key: formKeySignUp,
13                child: Center(child: Column(children: [
14                  expansionCard(ExpansionTile(
15                    title: const Text('●●●●'),
16                    children: [
17                      Row(
18                        crossAxisAlignment: CrossAxisAlignment.center,
19                        children: [
20                          const Expanded(child: Text('●●●●')),
21                          Container(
22                              width: 300,
23                              padding: const EdgeInsets.all(16),
24                              child: Column(children: [
25                                Text(selectedDate != "" ? selectedDate : "積込日を指定してください"),
26
27                                ElevatedButton(
28                                    onPressed: () => _pickDate(context),
29                                    child: const Text("カレンダー表示")
30                                )
31                              ],
32                              )
33                          )
34                        ],
35                      ),
36/* 以下省略　*/
37
38  /* 日付取得ボタンを押下したとき */
39  Future _pickDate(BuildContext context) async {
40    //DatePickerの初期値
41    final initialDate = DateTime.now();
42    //DatePickerを表示し、選択されたら変数に格納する
43    final newDate = await showDatePicker(
44        context: context,
45        //初期値を設定
46        initialDate: initialDate,
47        //選択できる日付の上限
48        firstDate: DateTime(DateTime.now().year - 1),
49        lastDate: DateTime(DateTime.now().year + 2),
50        // locale: const Locale('ja') //★この部分をコメントアウトしているとカレンダーは動くが、英語表記で取得する。逆にコメントアウトを外すとエラーになる。
51    );
52
53    //nullチェック
54    if (newDate != null) {
55      //選択された日付を変数に格納
56      setState(() => selectedDate = (DateFormat.yMMMd()).format(newDate));
57    } else {
58      //nullならば何もしない
59      return;
60    }
61  }

試したこと

これらのブログを参考にして進めています。
https://www.choge-blog.com/programming/flutterdatepicker-howto/
https://webbibouroku.com/Blog/Article/flutter-datepicker-ja

カレンダー内部が日本語出来ているのは、
・pubspec.ymlに「flutter_localizations: sdk: flutter」を追記してpubgetしたこと
・main.dartに、
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale("en"),
const Locale("ja"),
],
を追記したこと
が要因です。

補足情報（FW/ツールのバージョンなど）

開発ツール：AndroidStudio4.01
DartSDKバージョン：2.17.6
Flutterバージョン：3.05

もし不可能ならば別の手段で日付を取得する方法を考えますが、
もしScaffoldのままでも可能ならば、そのやり型を教えていただきたいです。
宜しくお願い致します。

moriman

2022/10/28 10:08

MaterialAppページから派生させたScaffold という表現がよくわからないのですが、どういう意味で派生と言っていますか？

Y.Mamoru

2022/10/28 10:11

コメントありがとうございます。上記のコードがボタンを押下することで開くようになっているのですがそのボタンを実装しているのがMaterialAppを返すページなんです。なので、表現が間違っていたかもしれないですが、「MaterialAppからボタン押下で呼び出されるScaffoldページ」ということで派生と表現していました。

行動規範の内容に同意します

回答2件

案1
mainのrunAppの前にIntl.defaultLocale = Platform.localeName;を入れたらどうでしょうか。
Intlのフォーマットのための言語情報をIntl.defaultLocaleから取得しているようなので。

OSの言語切り替え時の追従は、LocalizationsDelegateの派生を作り、その中でdefaultLocaleを変更するようにし、それをlocalizationsDelegatesに設定すればいいのだと思います。delegateを登録した場合はmainでのIntl.defaultLocale = Platform.localeName;は必要ないです。

Intl用のデフォルトのdelegateがあってもよさそうな感じがするのですが、それはなさそうです。

案2
GlobalMaterialLocalizations.delegateをdelegateに使用しているようなので、以下の様にMaterialLocalizationsのformatShortDateを使用する。
formatShortDateはyMMMdの形式で出力するようなので。

dart
1@override
2Widget build(BuildContext context) {
3  final d = MaterialLocalizations.of(context);
4  return Scaffold(
5    appBar: AppBar(
6      title: const Text("Text"),
7    ),
8    body: Column(children: [
9      Text(d.formatShortDate(DateTime.now())),

投稿2022/10/31 06:49

編集2022/10/31 09:03

ta.fu

総合スコア1667

Y.Mamoru

2022/10/31 09:31

ご丁寧に回答ありがとうございます！まだmorimanさん回答も試せていないのですが、時間をつくってta.fuさんの案も試させていただきます！ありがとうございます！

Y.Mamoru

2022/11/08 05:33

案1を試してみたのですが、Intlパッケージのインストールで何故かエラーが出てしまい、そちらのエラー解消ができなかった次第です。。。案2を試してみると、こちらは表示できました！ありがとうございます♪ 今回は先に回答くださったmorimanさんの方をベストアンサーにさせていただきますm(_ _)m 本当に回答ありがとうございます！

行動規範の内容に同意します

ベストアンサー

とりあえず、「カレンダー選択後の日付を日本語で表示させたい。」ということだけなら、

    //nullチェック
    if (newDate != null) {
      //選択された日付を変数に格納
      //setState(() => selectedDate = (DateFormat.yMMMd()).format(newDate));
      String newDateJP = '${newDate.year}年 ${newDate.month}月 ${newDate.day}日';
      setState(() => selectedDate = newDateJP);
    } else {
      //nullならば何もしない
      return;
    }

これで日本語表示になるのでこっちの方が速いような気がします。

ちょっと状況がはっきり掴めないのですが、それとは別にエラーが出ているんですかね?
それはもう解決していますか?
ただエラーに関してはコードが見られないとなかなか要領を得ることは難しいですね。

投稿2022/10/30 02:42

moriman

総合スコア615