Inputs
Pickers
The picker family gives you a single-column tap-to-open sheet, multi-column wheel pickers, number / measurement steppers, inline wheel-style date and time pickers (5 modes), trigger-button list rows that open a wheel sheet, date-range coupling, and four timer-picker modes for countdowns.
Every variant below is the same widget the showcase app on the App Store
uses — sourced from package:liqkit_ui/examples.dart so the docs and the
mobile app stay in sync.
Inline Calendar
// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget pickerInlineCalendarBuilder(BuildContext context) { return const SnippetFrame( maxWidth: 420, height: 360, child: _InlineCalendarExample(), );}class _InlineCalendarExample extends StatefulWidget { const _InlineCalendarExample(); @override State<_InlineCalendarExample> createState() => _InlineCalendarExampleState();}class _InlineCalendarExampleState extends State<_InlineCalendarExample> { DateTime _visibleMonth = DateTime(2026, 4); int? _selectedDay = 15; void _shiftMonth(int delta) { setState(() { _visibleMonth = DateTime(_visibleMonth.year, _visibleMonth.month + delta); _selectedDay = null; }); } @override Widget build(BuildContext context) { return LiqDatePicker( year: _visibleMonth.year, month: _visibleMonth.month, selectedDay: _selectedDay, currentDay: _visibleMonth.year == 2026 && _visibleMonth.month == 4 ? 27 : null, onPrev: () => _shiftMonth(-1), onNext: () => _shiftMonth(1), onDayTap: (day) => setState(() => _selectedDay = day), ); }}Single Column
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerSingleColumnBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 360, child: PickerSingleColumnExample());}Multi Column
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerMultiColumnBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 380, height: 280, child: PickerMultiColumnExample());}Number
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerNumberBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 320, child: PickerNumberExample());}Measurement
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerMeasurementBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 280, height: 240, child: PickerMeasurementExample());}Wheel Date
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerWheelDateBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 380, height: 260, child: PickerWheelDateExample());}Wheel Time
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerWheelTimeBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 380, height: 260, child: PickerWheelTimeExample());}Wheel Date Time
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerWheelDateTimeBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 380, height: 260, child: PickerWheelDateTimeExample());}Wheel Month Year
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerWheelMonthYearBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 380, height: 260, child: PickerWheelMonthYearExample());}Wheel Time 24h
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerWheelTime24hBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 380, height: 260, child: PickerWheelTime24hExample());}Trigger Buttons
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerTriggerButtonsBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 420, child: PickerTriggerButtonsExample());}Date Range
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerDateRangeBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 420, child: PickerDateRangeExample());}Timer Hms
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerTimerHmsBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 360, height: 240, child: PickerTimerHmsExample());}Timer Hm
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerTimerHmBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 360, height: 220, child: PickerTimerHmExample());}Timer Ms
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerTimerMsBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 360, height: 220, child: PickerTimerMsExample());}Timer Interval
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`./// Sources its widget tree from `package:liqkit_ui/examples.dart` so the/// docs preview stays in lockstep with the showcase app.Widget pickerTimerIntervalBuilder(BuildContext context) { return const SnippetFrame(maxWidth: 360, height: 220, child: PickerTimerIntervalExample());}