Data Presentation
Accordion
A vertically stacked set of interactive headings that reveal associated content sections when clicked. Each section can be expanded or collapsed independently.
1@override2Widget build(BuildContext _) => FAccordion(3 children: const [4 FAccordionItem(5 title: Text('Production Information'),6 child: Text(7 'Our flagship product combines cutting-edge technology with sleek design. '8 'Built with premium materials, it offers unparalleled performance and '9 'reliability.\n'10 'Key features include advanced processing capabilities, and an intuitive '11 'user interface designed for both beginners and experts.',12 ),13 ),14 FAccordionItem(15 initiallyExpanded: true,16 title: Text('Shipping Details'),17 child: Text(18 'We offer worldwide shipping through trusted courier partners. '19 'Standard delivery takes 3-5 business days, while express shipping '20 'ensures delivery within 1-2 business days.\n'21 'All orders are carefully packaged and fully insured. Track your'22 ' shipment in real-time through our dedicated tracking portal.',23 ),24 ),25 FAccordionItem(26 title: Text('Return Policy'),27 child: Text(28 'We stand behind our products with a comprehensive 30-day return policy. '29 "If you're not completely satisfied, simply return the item in its "30 'original condition.\n'31 'Our hassle-free return process includes free return shipping and full '32 'refunds processed within 48 hours of receiving the returned item.',33 ),34 ),35 ],36);37CLI
To generate a specific style for customization:
dart run forui style create accordionUsage
FAccordion(...)
1FAccordion(2 style: .delta(titlePadding: .value(.zero)),3 children: [FAccordionItem(title: Text('Title'), child: SizedBox())],4)FAccordionItem(...)
1FAccordionItem(2 style: const .delta(titlePadding: .value(.zero)),3 title: const Text('Title'),4 icon: const Icon(FIcons.chevronDown),5 initiallyExpanded: false,6 child: const Text('Content'),7)Examples
With Max Number of Expanded Items
1@override2Widget build(BuildContext _) => FAccordion(3 control: .managed(max: 2),4 children: const [5 FAccordionItem(6 title: Text('Production Information'),7 child: Text(8 'Our flagship product combines cutting-edge technology with sleek design. '9 'Built with premium materials, it offers unparalleled performance and '10 'reliability.\n'11 'Key features include advanced processing capabilities, and an intuitive '12 'user interface designed for both beginners and experts.',13 ),14 ),15 FAccordionItem(16 initiallyExpanded: true,17 title: Text('Shipping Details'),18 child: Text(19 'We offer worldwide shipping through trusted courier partners. '20 'Standard delivery takes 3-5 business days, while express shipping '21 'ensures delivery within 1-2 business days.\n'22 'All orders are carefully packaged and fully insured. Track your'23 ' shipment in real-time through our dedicated tracking portal.',24 ),25 ),26 FAccordionItem(27 title: Text('Return Policy'),28 child: Text(29 'We stand behind our products with a comprehensive 30-day return policy. '30 "If you're not completely satisfied, simply return the item in its "31 'original condition.\n'32 'Our hassle-free return process includes free return shipping and full '33 'refunds processed within 48 hours of receiving the returned item.',34 ),35 ),36 ],37);38Time Picker
A time picker that allows a time to be selected. The picker supports arrow key navigation. Recommended for touch devices.
Avatar
A circular image component that displays user profile pictures with a fallback option. The Avatar component provides a consistent way to represent users in your application, displaying profile images with fallbacks to initials or icons when images are unavailable.