Flutter：DatePicker 没有选择选定的日期

Question

我正在使用 flutter 构建一个个人开支应用程序。我打开模态 sheet，由此我输入了特定费用的新交易。在那个模态 sheet 中，我使用 showDatePicker() 打开日历来选择我的日期。我面临的问题是，当我打开 sheet 时，最初它显示没有选择日期，当我选择日期时它显示我选择的日期但是当我点击添加交易按钮时我可以显示在自定义列表中也是如此，显示的日期是现在的日期，即 DateTime.now() 而不是我选择的日期。

添加新交易的代码如下：

// ignore_for_file: deprecated_member_use

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

class NewTransaction extends StatefulWidget {
  final Function addTx;

  NewTransaction(this.addTx);

  @override
  State<NewTransaction> createState() => _NewTransactionState();
}

class _NewTransactionState extends State<NewTransaction> {
  final _titleController = TextEditingController();
  final _amountController = TextEditingController();
  DateTime? _selectedDate;

  void _submitData() {
    final enteredTitle = _titleController.text;
    final enteredAmount = double.parse(_amountController.text);

    if (enteredTitle.isEmpty || enteredAmount <= 0) {
      return;
    }

    widget.addTx(
      enteredTitle,
      enteredAmount,
    );

    Navigator.of(context).pop(); // closes the top most screen that is opened
  }

  void _presentDatePicker() {
    showDatePicker(
            context: context,
            initialDate: DateTime.now(),
            firstDate: DateTime(2022),
            lastDate: DateTime.now())
        .then((pickedDate) {
      if (pickedDate == null) {
        return;
      }
      setState(() {
        _selectedDate = pickedDate;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      child: Container(
        padding: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            TextField(
              decoration: const InputDecoration(labelText: 'Title'),
              controller: _titleController,
              onSubmitted: (_) => _submitData(),
              // onChanged: (val) {
              //   titleInput = val;
              // },
            ),
            TextField(
              decoration: const InputDecoration(labelText: 'Amount'),
              controller: _amountController,
              keyboardType: TextInputType.number,
              onSubmitted: (_) => _submitData(),
              // onChanged: (val) {
              //   amountInput = val;
              // },
            ),
            Container(
              height: 70,
              child: Row(children: <Widget>[
                Expanded(
                  child: Text(
                    _selectedDate == null
                        ? 'No Date Chosen'
                        : "Picked Date: ${DateFormat.yMd().format(_selectedDate!)}",
                  ),
                ),
                FlatButton(
                  textColor: Theme.of(context).primaryColor,
                  child: const Text("Choose Date",
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  onPressed: _presentDatePicker,
                )
              ]),
            ),
            RaisedButton(
              child: const Text('Add Transaction'),
              color: Theme.of(context).primaryColor,
              textColor: Theme.of(context).textTheme.button?.color,
              onPressed: _submitData,
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

我认为您需要将 _selectedDate 变量解析为 addTx 函数才能访问父屏幕上的值。

widget.addTx(
  enteredTitle,
  enteredAmount,
  _selectedDate
);

因为您的 _selectedDate 变量是您的本地变量。

Flutter：DatePicker 没有选择选定的日期

Flutter: DatePicker not picking the selected date

android

flutter

dart

datepicker