Data Presentation
Line Calendar
A compact calendar component that displays dates in a horizontally scrollable line, ideal for date selection in limited space.
Hold Shift while scrolling to navigate through dates on desktop and web.
FLineCalendar(
control: FLineCalendarControl.managed(
initial: DateTime.now().subtract(const Duration(days: 1)),
),
);CLI
To generate and customize this style:
dart run forui style create line-calendarUsage
FLineCalendar(...)
FLineCalendar(
control: FLineCalendarControl.managed(
controller: FCalendarController.date(...),
initial: DateTime.now(),
toggleable: false,
selectable: (date) => true,
onChange: (date) {},
),
style: (style) => style.copyWith(...),
initialScrollAlignment: AlignmentDirectional.center,
physics: const AlwaysScrollableScrollPhysics(),
cacheExtent: 100,
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
builder: (context, data, child) => child!,
start: DateTime(1900),
end: DateTime(2050),
initialScroll: DateTime.now(),
today: DateTime.now(),
);