time_picker_spinner

Time Picker with spinner instead of a default material time picker. This widget works with 12 or 24 hour format and custom interval mode, and this package allow localization ar and en.

Pub Version

Demo gif

image

Installation

  1. Add this to your package's pubspec.yaml file:
dependencies:
  time_picker_spinner: any
  1. Get the package using your IDE's GUI or via command line with
$ pub get
  1. Import the time_picker_spinner.dart file in your app
import 'package:time_picker_spinner/time_picker_spinner.dart';

Features

  • This widget works with 12.
  • This widget works with 24.
  • allow localization ar and en.

Usage

EN

en short en long

image | image

TimePickerSpinner(
              locale: const Locale('en', ''),
              time: dateTime,
              is24HourMode: false,
              isShowSeconds: true,
              itemHeight: 80,
              normalTextStyle: const TextStyle(
                fontSize: 24,
              ),
              highlightedTextStyle:
                  const TextStyle(fontSize: 24, color: Colors.blue),
              isForce2Digits: true,
              onTimeChange: (time) {
                setState(() {
                  dateTime = time;
                });
              },
            )

Ar

ar short ar long

image | image

TimePickerSpinner(
              locale: const Locale('ar', ''),
              time: dateTime,
              is24HourMode: false,
              isShowSeconds: true,
              itemHeight: 80,
              normalTextStyle: const TextStyle(
                fontSize: 24,
              ),
              highlightedTextStyle:
                  const TextStyle(fontSize: 24, color: Colors.blue),
              isForce2Digits: true,
              onTimeChange: (time) {
                setState(() {
                  dateTime = time;
                });
              },
            )

Props

props types defaultValues
time DateTime Current Time DateTime.now()
minutesInterval int 1
secondsInterval int 1
is24HourMode bool true
isShowSeconds bool false
isShowSeconds bool false
highlightedTextStyle TextStyle false
normalTextStyle TextStyle false
itemHeight double 60.0
itemWidth double 45.0
spacing double 20.0
alignment AlignmentGeometry Alignment.centerRight
isForce2Digits bool false
onTimeChange TimePickerCallback
locale bool en