dart - 当用户点击任何一天时，如何在日历的日期下显示一个值

Question

当用户点击 flutter 的默认日历中的某一天时，我想在日历的日期下向用户显示一个值(例如当天的价格)。我怎样才能做到这一点。我希望它显示在下图的位置:

更新这是我现在尝试过的，只是我在单击按钮后向用户显示的日期和时间选择器:

Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });

    }
    final TimeOfDay timePicked = await showTimePicker(
        context: context,
        initialTime: selectedTime,
      );
      if (picked != null && timePicked != selectedTime) {
        setState(() {
          selectedTime = timePicked;

        });
      }
  }

Answer 1

有一个文件绘制了 dayPicker 小部件。它位于此处:

{flutter_dir}/packages/flutter/lib/src/material/date_picker.dart

您可以编辑文件(我不推荐这样做)或 fork 包并更改它(或您喜欢的任何其他方式)。

使用下面的 dayWidget 代替原来的:

Widget dayWidget = Container(
      decoration: decoration,
      child: Center(
        child: Semantics(
          label: '${localizations.formatDecimal(day)}, ${localizations.formatFullDate(dayToBuild)}',
          selected: isSelectedDay,
          child: ExcludeSemantics(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(localizations.formatDecimal(day), style: itemStyle)
              ] + (isSelectedDay ? <Widget>[Text('Custome text')] : <Widget>[])),
          ),
        ),
      ),
    );

您还需要将变量传递给小部件。

更新:使用以下代码传递参数:

DayPicker({
    Key key,
    @required this.selectedDate,
    @required this.currentDate,
    @required this.onChanged,
    @required this.firstDate,
    @required this.lastDate,
    @required this.displayedMonth,
    this.selectableDayPredicate,
    this.dragStartBehavior = DragStartBehavior.down,
    this.optionalText //Added
  }) : assert(selectedDate != null),
       assert(currentDate != null),
       assert(onChanged != null),
       assert(displayedMonth != null),
       assert(dragStartBehavior != null),
       assert(!firstDate.isAfter(lastDate)),
       assert(selectedDate.isAfter(firstDate) || selectedDate.isAtSameMomentAs(firstDate)),
       super(key: key);

  /// The currently selected date.
  ///
  /// This date is highlighted in the picker.
  final DateTime selectedDate;

  final String optionalText; // Added