skills.rest
serverpod
serverpodOFFICIAL
Explore all skills by this author →
Website𝕏@ServerpodDevGitHub

shadcn_ui-time-picker

Integrate ShadTimePicker and ShadTimePickerFormField into Flutter forms with validation.

8|Updated Mar 7, 2026
Search Tags:#flutter#ui component#shadcn_ui#form field#time picker
One-click install
npx skills add https://github.com/serverpod/skills-registry --skill shadcn-ui-time-picker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn_ui-time-picker
Source: https://github.com/serverpod/skills-registry/tree/main/skills/shadcn_ui/shadcn_ui-time-picker
Command: npx skills add https://github.com/serverpod/skills-registry --skill shadcn-ui-time-picker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the process of adding time selection functionality to Flutter applications, specifically within the shadcn_ui design system.

Core Features & Use Cases

  • Standalone Time Picker: Use ShadTimePicker for flexible time selection with optional trailing widgets.
  • Form Field Integration: Employ ShadTimePickerFormField for seamless integration into forms, including labels, descriptions, and validation.
  • AM/PM Support: Utilize ShadTimePickerFormField.period for user-friendly AM/PM time selection.

Quick Start

Add a ShadTimePickerFormField with a label and an onChanged callback to your form.

Frequently Asked Questions about shadcn_ui-time-picker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a time picker to a Flutter form using shadcn_ui?▼

Add a time picker to a Flutter form using shadcn_ui by employing the ShadTimePickerFormField widget, which supports labels, descriptions, and validation for seamless form integration.

Can I use a standalone time picker in shadcn_ui without a form field?▼

Yes, you can use a standalone time picker in shadcn_ui without a form field by implementing the ShadTimePicker widget, which supports flexible time selection and optional trailing widgets.

Does the shadcn_ui time picker support AM and PM selection?▼

The shadcn_ui time picker supports AM and PM selection by utilizing the ShadTimePickerFormField.period property, allowing user-friendly 12-hour time format inputs.

What is the best way to handle time validation in Flutter shadcn_ui forms?▼

The best way to handle time validation in Flutter shadcn_ui forms is using ShadTimePickerFormField, which provides built-in validation support alongside labels and descriptions for reliable user input.

How do I trigger a callback when a user selects a time in a shadcn_ui time picker?▼

Trigger a callback when a user selects a time in a shadcn_ui time picker by adding an onChanged callback to your ShadTimePickerFormField, capturing the selected time immediately.

Related Skills

Explore More Software Engineering Skills→
serverpodserverpod
8

shadcn_ui-card

Generate Flutter UI cards with customizable headers, footers, and content using shadcn_ui.

Official
Basic
cosmixcosmix
53

serialization

Serializes data structures into JSON, Protocol Buffers, or MessagePack with schema evolution.

Community
Advanced
serverpodserverpod
8

shadcn_ui-date-picker

Integrate single and range date pickers into Flutter forms with shadcn_ui.

Official
Intermediate
flutterflutter
2.8k

flutter-add-widget-preview

Configure Flutter Widget Previewer with @Preview annotations for isolated UI rendering.

Official
Intermediate