time_picker_spinner

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that provides a time picker using spinner widgets instead of the default Material time picker. It supports both 12-hour and 24-hour formats, customizable time intervals, and offers localization for Arabic (ar) and English (en). Ideal for apps needing a consistent, non-Material design for time selection across multiple platforms. The widget is lightweight and integrates seamlessly into forms or settings screens where a traditional time picker is required.

Use cases

Custom time input in forms
Localized time selection
Non-Material UI design
Time interval customization
Cross-platform time pickers
Settings with time inputs

Key features

Spinner-based time selection
12/24 hour format support
Custom interval options
Arabic and English localization
Works on all major platforms
Lightweight and easy to integrate

Suitable for

Developers seeking alternative time pickers
Apps requiring localized time inputs
Designers avoiding Material components
Multi-platform applications
Form-heavy user interfaces

Considerations

Limited to basic time selection
No built-in validation
Requires manual handling of time logic
Not suitable for complex time operations
Depends on external localization setup

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Demo gif

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  time_picker_spinner: any

Get the package using your IDE's GUI or via command line with

$ pub get

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

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

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

Search packages, repositories and app categories