Flutter:如何在bottomsheet中创建Datepicker,如下图所示

edqdpe6u  于 2023-04-22  发布在  Flutter
关注(0)|答案(1)|浏览(107)

我需要设计一个DatePicker作为一个列内的小部件包含另一个小部件不弹出一个DatePicker只
有人能告诉我如何实现它作为PIC

46qrfjad

46qrfjad1#

您可以使用table_calendar或任何其他您需要的自定义小部件:

class CalendarBottomSheet extends StatefulWidget {
  const CalendarBottomSheet({Key key}) : super(key: key);

  @override
  State<CalendarBottomSheet> createState() => _CalendarBottomSheetState();
}

class _CalendarBottomSheetState extends State<CalendarBottomSheet> {
  DateTime _selectedDate;

  @override
  void initState() {
    super.initState();
    _selectedDate = DateTime.now();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Show Calendar'),
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return SizedBox(
                  height: height * 0.6,
                  child: Column(
                    children: <Widget>[
                      TableCalendar(
                        firstDay: DateTime(2000),
                        lastDay: DateTime(2050),
                        focusedDay: DateTime.now(),
                        calendarFormat: CalendarFormat.month,
                        calendarStyle: CalendarStyle(
                          selectedDecoration: BoxDecoration(
                            color: Theme.of(context).primaryColor,
                            shape: BoxShape.circle,
                          ),
                          todayDecoration: BoxDecoration(
                            color: Colors.grey[300],
                            shape: BoxShape.circle,
                          ),
                        ),
                        selectedDayPredicate: (date) {
                          return isSameDay(_selectedDate, date);
                        },
                        onDaySelected: (date, focusedDay) {
                          setState(() {
                            _selectedDate = date;
                          });
                          Navigator.pop(context);
                        },
                        calendarBuilders: CalendarBuilders(
                          selectedBuilder: (context, date, _) => Container(
                            decoration: BoxDecoration(
                              color: Theme.of(context).primaryColor,
                              shape: BoxShape.circle,
                            ),
                            child: Center(
                              child: Text(
                                date.day.toString(),
                                style: const TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

快乐编码...

相关问题