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

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

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

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

Q&A

解決済

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

Y.Mamoru
Y.Mamoru

総合スコア47

Flutter

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

2回答

0グッド

0クリップ

270閲覧

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

moriman

2022/10/28 10:08

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

2022/10/28 10:11

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

回答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

総合スコア1283

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Y.Mamoru

2022/10/31 09:31

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

2022/11/08 05:33

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

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

総合スコア534

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Y.Mamoru

2022/10/31 02:11

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

2022/11/02 22:34

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

2022/11/08 05:31

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Flutter

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