質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Q&A

解決済

2回答

733閲覧

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

Y.Mamoru

総合スコア47

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

0グッド

0クリップ

投稿2022/10/28 08:54

編集2022/10/28 08:56

前提

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

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

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

実現したいこと

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

・以下キャプチャ1枚目のボタンをクリックして、カレンダーを表示。
イメージ説明
・2枚目のキャプチャで、カレンダーから日付を選択。(ここの日本語化はできました。)
イメージ説明
・3枚目のキャプチャで、選択した日付を日本語で画面表示させたい。
イメージ説明

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

イメージ説明

該当のソースコード

dart

1 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のままでも可能ならば、そのやり型を教えていただきたいです。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moriman

2022/10/28 10:08

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

2022/10/28 10:11

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

回答2

0

  • 案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 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

総合スコア1685

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Y.Mamoru

2022/10/31 09:31

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

2022/11/08 05:33

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

0

ベストアンサー

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

//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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Y.Mamoru

2022/10/31 02:11

回答ありがとうございます! ちょっと現状バタバタしていまして、まだ上記の方法を試せていないのですが、 手が空き次第すぐやってみます! ありがとうございます!
moriman

2022/11/02 22:34

いえいえ、お気になさらずに! お時間のある時に試していただければ幸いでございます。
Y.Mamoru

2022/11/08 05:31

こちらの方法で問題なく表記できました! ありがとうございました(^o^)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問