Flutter 组件抽取：日期（DatePicker）、时间（TimePicker）弹窗选择器【仿照】

简介

仿照《Flutter 仿ios自定义一个DatePicker》实行的日期弹窗选择器（DatePicker）、时间弹窗选择器（TimePicker）

效果

范例

class _TestPageState extends State<TestPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Picker')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            GestureDetector(
              child: Container(
                alignment: Alignment.center,
                width: 160,
                height: 60,
                child: const Text('日期选择（年月日）'),
              ),
              onTap: () {
                DatePicker.show(
                  context,
                  startDate: DateTime(2022, 2, 2),
                  selectedDate: DateTime(2023, 3, 3),
                  endDate: DateTime(2025, 5, 5),
                  onSelected: (date) {
                    MsgUtil.toast(date.toString());
                  },
                );
              },
            ),
            GestureDetector(
              child: Container(
                alignment: Alignment.center,
                width: 160,
                height: 60,
                child: const Text('日期选择（年月）'),
              ),
              onTap: () {
                DatePicker.show(
                  context,
                  hideDay: true,
                  startDate: DateTime(2022, 2),
                  selectedDate: DateTime(2023, 3),
                  endDate: DateTime(2025, 5),
                  onSelected: (date) {
                    MsgUtil.toast(date.toString());
                  },
                );
              },
            ),
            GestureDetector(
              child: Container(
                alignment: Alignment.center,
                width: 160,
                height: 60,
                child: const Text('时间选择（时分秒）'),
              ),
              onTap: () {
                TimePicker.show(
                  context,
                  startTime: TimeData(11, 11, 11),
                  selectedTime: TimeData(15, 15, 15),
                  endTime: TimeData(22, 22, 22),
                  onSelected: (time) {
                    MsgUtil.toast(time.toString());
                  },
                );
              },
            ),
            GestureDetector(
              child: Container(
                alignment: Alignment.center,
                width: 160,
                height: 60,
                child: const Text('时间选择（时分）'),
              ),
              onTap: () {
                TimePicker.show(
                  context,
                  hideSecond: true,
                  startTime: TimeData(11, 11),
                  selectedTime: TimeData(15, 15),
                  endTime: TimeData(22, 22),
                  onSelected: (time) {
                    MsgUtil.toast(time.toString());
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

说明（DatePicker）

1、支持选中日期（selectedDate）、开始日期（startDate）、结束日期（endDate）的配置
2、支持“年月日”的选择，也支持“年月”的选择

代码（DatePicker）

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

typedef OnSelected = Function(DateTime date);

class DatePicker extends StatefulWidget {
  static void show(
    BuildContext context, {
    DateTime? startDate,
    DateTime? endDate,
    DateTime? selectedDate,
    bool hideDay = false,
    Function()? onCancel,
    required OnSelected onSelected,
  }) async {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        return ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(8),
            topRight: Radius.circular(8),
          ),
          child: DatePicker._(
            selectedDate: selectedDate,
            startDate: startDate,
            endDate: endDate,
            onSelected: onSelected,
            hideDay: hideDay,
          ),
        );
      },
    ).then((value) => onCancel?.call());
  }

  const DatePicker._({
    this.selectedDate,
    this.startDate,
    this.endDate,
    this.hideDay = false,
    required this.onSelected,
  });

  final DateTime? selectedDate;
  final DateTime? startDate;
  final DateTime? endDate;
  final bool hideDay;
  final OnSelected onSelected;

  @override
  State createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {
  late FixedExtentScrollController yearScrollController;
  late FixedExtentScrollController monthScrollController;
  late FixedExtentScrollController dayScrollController;

  List<String> yearList = []; // 年数组
  List<String> monthList = []; // 月数组
  List<String> dayList = []; // 天数组

  int yearIndex = 0; // 年的索引
  int monthIndex = 0; // 月的索引
  int dayIndex = 0; //天的索引

  late DateTime startDate;
  late DateTime endDate;
  late DateTime selectedDate;

  final double itemExtent = 44;

  /// 初始化数据
  void initData() {
    // 初始化年份数
    for (int i = startDate.year; i <= endDate.year; i++) {
      yearList.add(i.toString());
    }
    int selectYear = selectedDate.year;
    int selectMonth = selectedDate.month;
    // 初始化月份数
    monthList = getMonthList(selectYear);
    // 初始化天数
    dayList = getDayList(selectYear, selectMonth);
    // 初始化时间索引
    final List uniqueYearList = Set.from(yearList).toList();
    final List uniqueMonthList = Set.from(monthList).toList();
    final List uniqueDayList = Set.from(dayList).toList();
    // 获取索引
    setState(() {
      yearIndex = uniqueYearList.indexOf("${selectedDate.year}");
      monthIndex = uniqueMonthList.indexOf("${selectedDate.month}");
      dayIndex = uniqueDayList.indexOf("${selectedDate.day}");
    });
    // 设置Picker初始值
    yearScrollController = FixedExtentScrollController(initialItem: yearIndex);
    monthScrollController = FixedExtentScrollController(initialItem: monthIndex);
    dayScrollController = FixedExtentScrollController(initialItem: dayIndex);
  }

  List<String> getMonthList(int selectYear) {
    List<String> monthList = [];
    if (selectYear == startDate.year) {
      for (int i = startDate.month; i <= 12; i++) {
        monthList.add(i.toString());
      }
    } else if (selectYear == endDate.year) {
      for (int i = 1; i <= endDate.month; i++) {
        monthList.add(i.toString());
      }
    } else {
      for (int i = 1; i <= 12; i++) {
        monthList.add(i.toString());
      }
    }
    return monthList;
  }

  List<String> getDayList(int selectYear, int selectMonth) {
    List<String> dayList = [];
    int days = getDayCount(selectYear, selectMonth);
    if (selectYear == startDate.year && selectMonth == startDate.month) {
      for (int i = startDate.day; i <= days; i++) {
        dayList.add(i.toString());
      }
    } else if (selectYear == endDate.year && selectMonth == endDate.month) {
      for (int i = 1; i <= endDate.day; i++) {
        dayList.add(i.toString());
      }
    } else {
      for (int i = 1; i <= days; i++) {
        dayList.add(i.toString());
      }
    }
    return dayList;
  }

  int getDayCount(int year, int month) {
    int dayCount = DateTime(year, month + 1, 0).day;
    return dayCount;
  }

  /// 选中年月后更新天
  void updateDayList() {
    int year = int.parse(yearList[yearIndex]);
    int month = int.parse(monthList[monthIndex]);
    setState(() {
      dayIndex = 0;
      dayList = getDayList(year, month);
      if (dayScrollController.positions.isNotEmpty) {
        dayScrollController.jumpTo(0);
      }
    });
  }

  /// 选中年后更新月
  void updateMonthList() {
    int selectYear = int.parse(yearList[yearIndex]);
    setState(() {
      monthIndex = 0;
      monthList = getMonthList(selectYear);
      if (monthScrollController.positions.isNotEmpty) {
        monthScrollController.jumpTo(0);
      }
    });
  }

  @override
  void initState() {
    super.initState();
    startDate = widget.startDate ?? DateTime(1970, 1, 1);
    endDate = widget.endDate ?? DateTime(2099, 1, 1);
    selectedDate = widget.selectedDate ?? DateTime.now();
    if (endDate.difference(startDate).inSeconds < 0) {
      endDate = startDate;
    }
    if (selectedDate.difference(startDate).inSeconds < 0) {
      selectedDate = startDate;
    }
    if (selectedDate.difference(endDate).inSeconds > 0) {
      selectedDate = endDate;
    }
    initData();
  }

  @override
  void dispose() {
    yearScrollController.dispose();
    monthScrollController.dispose();
    dayScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            color: Colors.white,
            width: double.maxFinite,
            height: 200,
            child: Stack(
              alignment: AlignmentDirectional.center,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width - 32,
                  height: itemExtent - 8,
                  decoration: BoxDecoration(
                    color: const Color(0xFFF1F1F1),
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                Positioned(
                  left: 20,
                  right: 20,
                  top: 0,
                  bottom: 0,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Expanded(child: yearPickerView()),
                      Expanded(child: monthPickerView()),
                      widget.hideDay
                          ? const SizedBox()
                          : Expanded(child: dayPickerView()),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            height: 68,
            padding: const EdgeInsets.only(left: 16, right: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Expanded(
                  child: TextButton(
                    child: const Text('取 消'),
                    onPressed: () {
                      Navigator.pop(context, false);
                    },
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: TextButton(
                    child: const Text('确 定'),
                    onPressed: () {
                      Navigator.pop(context, true);
                      widget.onSelected.call(DateTime(
                        int.parse(yearList[yearIndex]),
                        int.parse(monthList[monthIndex]),
                        int.parse(dayList[dayIndex]),
                      ));
                    },
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: MediaQuery.of(context).padding.bottom),
        ],
      ),
    );
  }

  /// 年Picker
  Widget yearPickerView() {
    return buildPickerBorder(
      child: CupertinoPicker(
        scrollController: yearScrollController,
        looping: false,
        selectionOverlay: const Center(),
        onSelectedItemChanged: (index) {
          setState(() {
            yearIndex = index;
          });
          updateMonthList();
          updateDayList();
        },
        itemExtent: itemExtent,
        children: buildYearWidget(),
      ),
    );
  }

  /// 月Picker
  Widget monthPickerView() {
    return buildPickerBorder(
      child: CupertinoPicker(
        scrollController: monthScrollController,
        looping: false,
        selectionOverlay: const Center(),
        onSelectedItemChanged: (index) {
          setState(() {
            monthIndex = index;
          });
          updateDayList();
        },
        itemExtent: itemExtent,
        children: buildMonthWidget(),
      ),
    );
  }

  /// 日Picker
  Widget dayPickerView() {
    return buildPickerBorder(
      child: CupertinoPicker(
        scrollController: dayScrollController,
        looping: false,
        selectionOverlay: const Center(),
        onSelectedItemChanged: (index) {
          setState(() {
            dayIndex = index;
          });
        },
        itemExtent: itemExtent,
        children: buildDayWidget(),
      ),
    );
  }

  /// 年Widget
  List<Widget> buildYearWidget() {
    List<Widget> widgets = [];
    for (var i = 0; i < yearList.length; i++) {
      widgets.add(
        Center(
          child: Text(
            '${yearList[i]}年',
            style: getTextStyle(i == yearIndex),
            maxLines: 1,
          ),
        ),
      );
    }
    return widgets;
  }

  /// 月Widget
  List<Widget> buildMonthWidget() {
    List<Widget> widgets = [];
    for (var i = 0; i < monthList.length; i++) {
      widgets.add(
        Center(
          child: Text(
            // monthList[i].padLeft(2, '0')
            '${monthList[i]}月',
            style: getTextStyle(i == monthIndex),
            maxLines: 1,
          ),
        ),
      );
    }
    return widgets;
  }

  /// 日Widget
  List<Widget> buildDayWidget() {
    List<Widget> widgets = [];
    for (var i = 0; i < dayList.length; i++) {
      widgets.add(
        Center(
          child: Text(
            // dayList[i].padLeft(2, '0')
            '${dayList[i]}日',
            style: getTextStyle(i == dayIndex),
            maxLines: 1,
          ),
        ),
      );
    }
    return widgets;
  }

  TextStyle getTextStyle(bool bold) {
    return TextStyle(
      color: Colors.black,
      fontSize: 20,
      height: 1,
      fontWeight: bold ? FontWeight.w600 : FontWeight.w400,
    );
  }

  Widget buildPickerBorder({required Widget child}) {
    return Stack(
      alignment: AlignmentDirectional.center,
      children: [
        /*Container(
          width: 90,
          height: itemExtent - 8,
          decoration: BoxDecoration(
            color: const Color(0xffEFEFF0),
            borderRadius: BorderRadius.circular(10),
          ),
        ),*/
        child,
      ],
    );
  }
}

说明（TimePicker）

1、支持选中时间（selectedtTime）、开始时间（starttTime）、结束时间（endtTime）的配置
2、支持“时分秒”的选择，也支持“时分”的选择
3、自定义时间数据类（TimeData）

代码（TimePicker）

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

typedef OnSelected = Function(TimeData time);
typedef PickerBuilder = Widget Function(BuildContext context);

class TimeData {
  final int hour;
  final int minute;
  final int second;

  TimeData(this.hour, [this.minute = 0, this.second = 0])
      : assert(hour >= 0 && hour <= 23),
        assert(minute >= 0 && minute <= 59),
        assert(second >= 0 && second <= 59);

  factory TimeData.now() {
    var now = DateTime.now();
    return TimeData(now.hour, now.minute, now.second);
  }

  bool precede(TimeData other) {
    return (hour < other.hour) ||
        (hour == other.hour && minute < other.minute) ||
        (hour == other.hour && minute == other.minute && second < other.second);
  }

  @override
  String toString() {
    return '$hour:$minute:$second';
  }
}

class TimePicker extends StatefulWidget {
  static void show(
    BuildContext context, {
    TimeData? startTime,
    TimeData? endTime,
    TimeData? selectedTime,
    bool hideSecond = false,
    Function()? onCancel,
    required OnSelected onSelected,
  }) async {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        return ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(8),
            topRight: Radius.circular(8),
          ),
          child: TimePicker._(
            selectedTime: selectedTime,
            startTime: startTime,
            endTime: endTime,
            hideSecond: hideSecond,
            onSelected: onSelected,
          ),
        );
      },
    ).then((value) => onCancel?.call());
  }

  const TimePicker._({
    this.selectedTime,
    this.startTime,
    this.endTime,
    this.hideSecond = false,
    required this.onSelected,
  });

  final TimeData? selectedTime;
  final TimeData? startTime;
  final TimeData? endTime;
  final bool hideSecond;
  final OnSelected onSelected;

  @override
  State createState() => _TimePickerState();
}

class _TimePickerState extends State<TimePicker> {
  late FixedExtentScrollController hourScrollController;
  late FixedExtentScrollController minuteScrollController;
  late FixedExtentScrollController secondScrollController;

  List<String> hourList = [];
  List<String> minuteList = [];
  List<String> secondList = [];

  int hourIndex = 0;
  int minuteIndex = 0;
  int secondIndex = 0;

  late TimeData startTime;
  late TimeData endTime;
  late TimeData selectedTime;

  final double itemExtent = 44;

  /// 初始化数据
  void initData() {
    // 初始化时
    for (int i = startTime.hour; i <= endTime.hour; i++) {
      hourList.add(i.toString());
    }
    int selectHour = selectedTime.hour;
    int selectMinute = selectedTime.minute;
    // 初始化分
    minuteList = getMinuteList(selectHour);
    // 初始化秒
    secondList = getSecondList(selectHour, selectMinute);
    // 初始化时间索引
    final List uniqueHourList = Set.from(hourList).toList();
    final List uniqueMinuteList = Set.from(minuteList).toList();
    final List uniqueSecondList = Set.from(secondList).toList();
    // 获取索引
    setState(() {
      hourIndex = uniqueHourList.indexOf("${selectedTime.hour}");
      minuteIndex = uniqueMinuteList.indexOf("${selectedTime.minute}");
      secondIndex = uniqueSecondList.indexOf("${selectedTime.second}");
    });
    // 设置Picker初始值
    hourScrollController = FixedExtentScrollController(initialItem: hourIndex);
    minuteScrollController = FixedExtentScrollController(initialItem: minuteIndex);
    secondScrollController = FixedExtentScrollController(initialItem: secondIndex);
  }

  List<String> getMinuteList(int selectHour) {
    List<String> list = [];
    if (selectHour == startTime.hour) {
      for (int i = startTime.minute; i <= 59; i++) {
        list.add(i.toString());
      }
    } else if (selectHour == endTime.hour) {
      for (int i = 0; i <= endTime.minute; i++) {
        list.add(i.toString());
      }
    } else {
      for (int i = 0; i <= 59; i++) {
        list.add(i.toString());
      }
    }
    return list;
  }

  List<String> getSecondList(int selectHour, int selectMinute) {
    List<String> list = [];
    if (selectHour == startTime.hour && selectMinute == startTime.minute) {
      for (int i = startTime.second; i <= 59; i++) {
        list.add(i.toString());
      }
    } else if (selectHour == endTime.hour && selectMinute == endTime.minute) {
      for (int i = 0; i <= endTime.second; i++) {
        list.add(i.toString());
      }
    } else {
      for (int i = 0; i <= 59; i++) {
        list.add(i.toString());
      }
    }
    return list;
  }

  /// 选中时分后更新秒
  void updateSecondList() {
    int hour = int.parse(hourList[hourIndex]);
    int minute = int.parse(minuteList[minuteIndex]);
    setState(() {
      secondIndex = 0;
      secondList = getSecondList(hour, minute);
      if (secondScrollController.positions.isNotEmpty) {
        secondScrollController.jumpTo(0);
      }
    });
  }

  /// 选中时后更新分
  void updateMinuteList() {
    int selectHour = int.parse(hourList[hourIndex]);
    setState(() {
      minuteIndex = 0;
      minuteList = getMinuteList(selectHour);
      if (minuteScrollController.positions.isNotEmpty) {
        minuteScrollController.jumpTo(0);
      }
    });
  }

  @override
  void initState() {
    super.initState();
    DateTime now = DateTime.now();
    startTime = widget.startTime ?? TimeData(0, 0, 0);
    endTime = widget.endTime ?? TimeData(23, 59, 59);
    selectedTime = widget.selectedTime ?? TimeData(now.hour, now.minute, now.second);
    if (endTime.precede(startTime)) {
      endTime = startTime;
    }
    if (selectedTime.precede(startTime)) {
      selectedTime = startTime;
    }
    if (endTime.precede(selectedTime)) {
      selectedTime = endTime;
    }
    initData();
  }

  @override
  void dispose() {
    hourScrollController.dispose();
    minuteScrollController.dispose();
    secondScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            color: Colors.white,
            width: double.maxFinite,
            height: 200,
            child: Stack(
              alignment: AlignmentDirectional.center,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width - 32,
                  height: itemExtent - 8,
                  decoration: BoxDecoration(
                    color: const Color(0xFFF1F1F1),
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                Positioned(
                  left: 20,
                  right: 20,
                  top: 0,
                  bottom: 0,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Expanded(child: hourPickerView()),
                      Expanded(child: minutePickerView()),
                      widget.hideSecond
                          ? const SizedBox()
                          : Expanded(child: secondPickerView()),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            height: 68,
            padding: const EdgeInsets.only(left: 16, right: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Expanded(
                  child: TextButton(
                    child: const Text('取 消'),
                    onPressed: () {
                      Navigator.pop(context, false);
                    },
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: TextButton(
                    child: const Text('确 定'),
                    onPressed: () {
                      Navigator.pop(context, true);
                      widget.onSelected.call(TimeData(
                        int.parse(hourList[hourIndex]),
                        int.parse(minuteList[minuteIndex]),
                        int.parse(secondList[secondIndex]),
                      ));
                    },
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: MediaQuery.of(context).padding.bottom),
        ],
      ),
    );
  }

  /// 时Picker
  Widget hourPickerView() {
    return buildPickerBorder(
      child: CupertinoPicker(
        scrollController: hourScrollController,
        looping: false,
        selectionOverlay: const Center(),
        onSelectedItemChanged: (index) {
          setState(() {
            hourIndex = index;
          });
          updateMinuteList();
          updateSecondList();
        },
        itemExtent: itemExtent,
        children: buildHourWidget(),
      ),
    );
  }

  /// 分Picker
  Widget minutePickerView() {
    return buildPickerBorder(
      child: CupertinoPicker(
        scrollController: minuteScrollController,
        looping: false,
        selectionOverlay: const Center(),
        onSelectedItemChanged: (index) {
          setState(() {
            minuteIndex = index;
          });
          updateSecondList();
        },
        itemExtent: itemExtent,
        children: buildMinuteWidget(),
      ),
    );
  }

  /// 秒Picker
  Widget secondPickerView() {
    return buildPickerBorder(
      child: CupertinoPicker(
        scrollController: secondScrollController,
        looping: false,
        selectionOverlay: const Center(),
        onSelectedItemChanged: (index) {
          setState(() {
            secondIndex = index;
          });
        },
        itemExtent: itemExtent,
        children: buildSecondWidget(),
      ),
    );
  }

  /// 时Widget
  List<Widget> buildHourWidget() {
    List<Widget> widgets = [];
    for (var i = 0; i < hourList.length; i++) {
      widgets.add(
        Center(
          child: Text(
            // hourList[i].padLeft(2, '0')
            '${hourList[i]}时',
            style: getTextStyle(i == hourIndex),
            maxLines: 1,
          ),
        ),
      );
    }
    return widgets;
  }

  /// 分Widget
  List<Widget> buildMinuteWidget() {
    List<Widget> widgets = [];
    for (var i = 0; i < minuteList.length; i++) {
      widgets.add(
        Center(
          child: Text(
            // minuteList[i].padLeft(2, '0')
            '${minuteList[i]}分',
            style: getTextStyle(i == minuteIndex),
            maxLines: 1,
          ),
        ),
      );
    }
    return widgets;
  }

  /// 秒Widget
  List<Widget> buildSecondWidget() {
    List<Widget> widgets = [];
    for (var i = 0; i < secondList.length; i++) {
      widgets.add(
        Center(
          child: Text(
            // secondList[i].padLeft(2, '0')
            '${secondList[i]}秒',
            style: getTextStyle(i == secondIndex),
            maxLines: 1,
          ),
        ),
      );
    }
    return widgets;
  }

  TextStyle getTextStyle(bool bold) {
    return TextStyle(
      color: Colors.black,
      fontSize: 20,
      height: 1,
      fontWeight: bold ? FontWeight.w600 : FontWeight.w400,
    );
  }

  Widget buildPickerBorder({required Widget child}) {
    return Stack(
      alignment: AlignmentDirectional.center,
      children: [
        /*Container(
          width: 90,
          height: itemExtent - 8,
          decoration: BoxDecoration(
            color: const Color(0xffEFEFF0),
            borderRadius: BorderRadius.circular(10),
          ),
        ),*/
        child,
      ],
    );
  }
}