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.
Overview
1@override2Widget build(BuildContext _) => Row(3 mainAxisAlignment: .center,4 spacing: 10,5 children: [6 FAvatar(image: AssetImage(path('avatar.png')), fallback: const Text('MN')),7 FAvatar(image: const AssetImage(''), fallback: const Text('MN')),8 FAvatar(image: const AssetImage('')),9 ],10);11CLI
To generate and customize this style:
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
1@override2Widget build(BuildContext context) => Row(3 mainAxisAlignment: .center,4 spacing: 10,5 children: [6 FAvatar.raw(),7 FAvatar.raw(8 child: Icon(FIcons.baby, color: context.theme.colors.mutedForeground),9 ),10 FAvatar.raw(child: const Text('MN')),11 ],12);13Fallback
1@override2Widget build(BuildContext _) => Row(3 mainAxisAlignment: .center,4 spacing: 10,5 children: [6 FAvatar(image: const AssetImage(''), fallback: const Text('MN')),7 FAvatar(image: const AssetImage('')),8 ],9);10Accordion
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.