前提
Flutterを使用してアプリケーションを作成しています。
その中で日付を選択する機能を持たせたいのですが、
カレンダーを表示させて選択できるように、showDatePickerを使ってみました。
しかしカレンダーを実装するページは、あるMaterialAppページから派生させたScaffoldのみを返すページとして作っていました。
結果として、「MaterialAppが見つからない(Scaffoldの中ではlocalization delegatesが設定できない)」という内容のエラーが出ています。
どうにか実装させることはできないでしょうか?
実現したいこと
カレンダー選択後の日付を日本語で表示させたい。
・以下キャプチャ1枚目のボタンをクリックして、カレンダーを表示。
・2枚目のキャプチャで、カレンダーから日付を選択。(ここの日本語化はできました。)
・3枚目のキャプチャで、選択した日付を日本語で画面表示させたい。
発生している問題・エラーメッセージ
該当のソースコード
dart
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("●●●●"), ), body: Column(children: <Widget>[ Expanded( child: SingleChildScrollView( child: Form( key: formKeySignUp, child: Center(child: Column(children: [ expansionCard(ExpansionTile( title: const Text('●●●●'), children: [ Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ const Expanded(child: Text('●●●●')), Container( width: 300, padding: const EdgeInsets.all(16), child: Column(children: [ Text(selectedDate != "" ? selectedDate : "積込日を指定してください"), ElevatedButton( onPressed: () => _pickDate(context), child: const Text("カレンダー表示") ) ], ) ) ], ),/* 以下省略 */ /* 日付取得ボタンを押下したとき */ Future _pickDate(BuildContext context) async { //DatePickerの初期値 final initialDate = DateTime.now(); //DatePickerを表示し、選択されたら変数に格納する final newDate = await showDatePicker( context: context, //初期値を設定 initialDate: initialDate, //選択できる日付の上限 firstDate: DateTime(DateTime.now().year - 1), lastDate: DateTime(DateTime.now().year + 2), // locale: const Locale('ja') //★この部分をコメントアウトしているとカレンダーは動くが、英語表記で取得する。逆にコメントアウトを外すとエラーになる。 ); //nullチェック if (newDate != null) { //選択された日付を変数に格納 setState(() => selectedDate = (DateFormat.yMMMd()).format(newDate)); } else { //nullならば何もしない return; } }
試したこと
これらのブログを参考にして進めています。
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のままでも可能ならば、そのやり型を教えていただきたいです。
宜しくお願い致します。
0 コメント