Data Presentation
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.
CLI
To generate a specific style for customization:
dart run forui style create avatarUsage
FAvatar(...)
1FAvatar(2 style: const .delta(backgroundColor: Color(0xFF000000)),3 size: 40.0,4 image: const NetworkImage('https://example.com/avatar.png'),5)FAvatar.raw(...)
1FAvatar.raw(2 style: const .delta(backgroundColor: Color(0xFF000000)),3 size: 40.0,4 child: const Text('AB'),5)Examples
Raw
Fallback
Accordion
A vertically stacked set of interactive headings that reveal associated content sections when clicked. Each section can be expanded or collapsed independently.
Badge
A badge draws attention to specific information, such as labels and counts. Use badges to display status, notifications, or small pieces of information that need to stand out.