Home > front end >  How to restrict user from selecting past time in Flutter
How to restrict user from selecting past time in Flutter

Time:02-14

For example if it's 16:00 then selecting 15:59 or some earlier time from the same day shouldn't be allowed.

CodePudding user response:

You should check in the options of whichever component you are using.

For instance for flutter_datetime_picker package, there is a property minTime that you could set at the current date time to prevent selecting a past time.

TextButton(
    onPressed: () {
        DatePicker.showDatePicker(
           context,
           minTime: DateTime.now(),
           maxTime: DateTime(2030, 12, 31), 
           onChanged: (date) {
               print('change $date');
           },
           currentTime: DateTime.now(),
        );
    },
    child: Text(
        'Show Time Picker',
    ),
);

CodePudding user response:

This CustomTimerPicker provide hour and minute on callback, and we can provide initial TimeOfDay else it will use TimeOfDay.now().

Run on dartPad.

class CustomTimerPicker extends StatefulWidget {
  late final TimeOfDay intiTime;

  final Function(int selectedHour, int selectedMinute) onChanged;
  CustomTimerPicker({
    Key? key,
    required this.onChanged,
    TimeOfDay? intiTimeOfDay,
  }) : super(key: key) {
    intiTime = intiTimeOfDay ?? TimeOfDay.now();
  }

  @override
  State<CustomTimerPicker> createState() => _CustomTimerPickerState();
}

class _CustomTimerPickerState extends State<CustomTimerPicker> {
  late int selectedHour;
  late int selectedMinutes;

  @override
  void initState() {
    super.initState();
    selectedHour = widget.intiTime.hour;
    selectedMinutes = widget.intiTime.minute;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // hour picker
        SizedBox(
          width: kToolbarHeight,
          child: CupertinoPicker(
            // backgroundColor: Colors.cyanAccent, //bg Color
            itemExtent: 50,
            onSelectedItemChanged: (v) {
              setState(() {
                selectedHour = v   widget.intiTime.hour;
              });
              widget.onChanged(
                selectedHour,
                selectedMinutes,
              );
            },
            children: List.generate(
              24 - widget.intiTime.hour,
              (index) => Center(
                child: Text(
                  "${index   widget.intiTime.hour}",
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
        ),

        //minute Picker
        SizedBox(
          width: kToolbarHeight,
          child: CupertinoPicker(
            itemExtent: 50,
            onSelectedItemChanged: (v) {
              setState(() {
                selectedMinutes = v   widget.intiTime.minute;
              });
              widget.onChanged(
                selectedHour,
                selectedMinutes,
              );
            },
            children: List.generate(
              60 - widget.intiTime.minute,
              (index) => Center(
                child: Text(
                  "${index   widget.intiTime.minute}",
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

And use this widget providing height

SizedBox(
  height: 200,
  child: CustomTimerPicker(
    // intiTimeOfDay: TimeOfDay(hour: 3, minute: 4),
    onChanged: (selectedHour, selectedMinute) {
      setState(() {
        h = selectedHour;
        m = selectedMinute;
      });
      debugPrint("H: $selectedHour minute: $selectedMinute");
    },
  ),
),
  • Related