Overview

A dynamic time‑picker built entirely with FlutterFlow’s Carousel widget, offering:

• Vertical scrolling carousels for hours (01–12) and minutes (00–59)
• Viewport Fraction and Shrink Factor set to control item size and emphasis
• Looping enabled for seamless infinite scroll
• A static “:” separator and optional AM/PM dropdown for clarity

Dependencies

No external packages—uses only FlutterFlow built‑in widgets and Custom Functions.

• Carousel (built‑in)
• Custom Functions module for dynamic data

Usage & Setup

1. Layout

   • Add a Row containing three children:
     1. Carousel (Hours) with a single page containing a parent column and text
     2. Text “:”
     3. Carousel (Minutes) with a single page containing a parent column and text
   • Optionally, add an AM/PM Dropdown beside these.

2. Carousel Configuration

   • Scroll Direction: Vertical
   • Viewport Fraction: 0.25
   • Shrink Factor: 0.5
   • Loop Carousel Contents: toggled on

3. Bind Dynamic Items

   • The first carousel (from left to right) becomes the Hours carousel, generate dynamic children from the “carouselHours” custom function then inside
   • Repeat for the second carousel but generate the children from the “carouselMinutes”

4. Bind the text

   • Bind the text inside each respective carousel to the list of strings from their custom functions.

   Note: Ensure both action have the is List box ticked as the hours and minutes are a list of strings.

Custom Functions

carouselHours