【Dart】カレンダーで選択した日付がTextに表示されないです

解決したい課題

選択した日付が「日付を選択」のText欄に反映させたいです。

現状

①「日付を選択」をタップ後、カレンダーが表示されます。
②カレンダーの中から日付を選択しOKをタップします。
③カレンダーが閉じます。
④日付が表示されないです。←なぜ表示されないのか不明です。
※エラーは出力されていません。

コード

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text('narururu'),
          ),
          body: GestureDetector(
            onTap: () => FocusScope.of(context).unfocus(),
            child: HomePage(),
          )),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  String _testItem = '日付を選択';

  DateTime _date = new DateTime.now();

  Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: _date,
      firstDate: new DateTime(2000),
      lastDate: new DateTime.now().add(new Duration(days: 360)),
    );
    if (picked != null) setState(() => _date = picked);
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Row(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              _testItem == '日付を選択' ? '日付を選択' : _inputDate(),
              style: TextStyle(
                color: _testItem == '日付を選択' ? Colors.grey : Colors.black,
              ),
            ),
          ),
        ],
      ),
      onTap: () {
        _selectDate(context);
      },
    );
  }

  Widget _inputDate() {
    return Row(
      children: [
        Text(_date.year.toString() + '年'),
        Text(_date.month.toString() + '月'),
        Text(_date.day.toString() + '日'),
      ],
    );
  }
}

どなたかアドバイスいただけないでしょうか。
エラーが表示されないため、どこが間違っているのか分かりません。
どうか、よろしくお願いいたします。

追記

Textの中に_inputDate(),で記述するとエラーがでました。
ふむふむ、_inputDate(),はStringではなくWidgetだからダメなんですね。

Error: The argument type 'Widget' can't be assigned to the parameter type 'String'.
 - 'Widget' is from 'package:flutter/src/widgets/framework.dart' ('/C:/src/flutter/packages/flutter/lib/src/widgets/framework.dart').
              _inputDate(),

けど、どうしよう('_')考え中

追記2

WidgetをStringに変更して下記のコードで試してみました。
エラーは出力されませんが、日付は表示されませんでした。
うーん、何がいけないのだー????

Text(
              _testItem == '日付を選択'
                  ? '日付を選択'
                  : _date.year.toString() +
                      '年' +
                      _date.month.toString() +
                      '月' +
                      _date.day.toString() +
                      '日',
              style: TextStyle(
                color: _testItem == '日付を選択' ? Colors.grey : Colors.black,
              ),
            ),

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

回答1件

ベストアンサー

narururuさんのコードでは、_selectDate()で_testItemの値が更新できていません。
_testItemは日付を選択した後も、'日付を選択'のままになってしまっています。
（ちなみに更新されているのは、DateTime型の_dateです。）

こういうのは、順を追って考えてみれば分かります！
(正常に動作するコードで解説します。)

まず最初に、InkWellのonTapで、selectDate()が行われます。

では、selectDate()とは何か？

//asyncは、関数内でawaitを行いたいときに、中括弧の前に必要なキーワード。
Future<void> _selectDate(BuildContext context) async {
//showDatePickerで値が得られるまで待機(await)。値が得られ次第、DateTime型のpickedという変数に入れます。ここで待機しなければ、カレンダーで日付を選択される前に次の処理が行われてしまいます。具体的には、if(picked…)の処理が。
final DateTime picked = await showDatePicker(
context: context,
initialDate: _date,
firstDate: DateTime(2000),
lastDate: DateTime.now().add(Duration(days: 360)),
);
//もしpickedの値がnullでなければ。
//すなわち、showDatePickerで値が得られていれば。
//すなわち、showDatePicker()のカレンダーでokが押されていれば、
//_testItemの値を更新(setState)

if (picked != null)
  setState(

//Dartでの文字列の連結で調べてみてください。picked.year.toString + '年' + …みたいな風にもかけますが、こちらの方が見やすいはずです。
() => _testItem = '${picked.year}年${picked.month}月${picked.day}日');
}

flutter
1
2class HomePage extends StatefulWidget {
3  HomePageState createState() => HomePageState();
4}
5
6class HomePageState extends State<HomePage> {
7  String _testItem = '日付を選択';
8
9  DateTime _date = DateTime.now();
10
11  Future<void> _selectDate(BuildContext context) async {
12    final DateTime picked = await showDatePicker(
13      context: context,
14      initialDate: _date,
15      firstDate: DateTime(2000),
16      lastDate: DateTime.now().add(Duration(days: 360)),
17    );
18    if (picked != null)
19      setState(
20          () => _testItem = '${picked.year}年${picked.month}月${picked.day}日');
21  }
22
23  @override
24  Widget build(BuildContext context) {
25    return InkWell(
26      child: Row(
27        children: [
28          Padding(
29            padding: const EdgeInsets.all(8.0),
30            child: Text(
31              _testItem,
32              style: TextStyle(
33                color: _testItem == '日付を選択' ? Colors.grey : Colors.black,
34              ),
35            ),
36          ),
37        ],
38      ),
39      onTap: () {
40        _selectDate(context);
41      },
42    );
43  }
44}
45

投稿2021/02/07 14:36

flutter_labo

総合スコア110

narururu

2021/02/07 15:52

ご回答ありがとうございます。taiso.itsukageさん☺ ご丁寧に解説までしてくださり、ありがとうございます。ふむふむ、taisoさんのように条件分岐式を記述すれば_testItemを更新できるのですね???? 勉強になります！また、'${picked.year}年${picked.month}月${picked.day}日'の記述もとてもスッキリしていていいですね！参考にさせていただきます。いろいろとアドバイスしていただき本当にありがとうございました！

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