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
Row(
mainAxisAlignment: MainAxisAlignment.center,
spacing: 10,
children: [
FAvatar(image: AssetImage('avatar.png'), fallback: const Text('MN')),
FAvatar(image: const AssetImage(''), fallback: const Text('MN')),
FAvatar(image: const AssetImage('')),
],
);CLI
To generate and customize this style:
dart run forui style create avatarUsage
FAvatar(...)
FAvatar(
image: const NetworkImage('https://example.com/profile.jpg'),
style: (style) => style.copyWith(...),
size: 40.0,
semanticsLabel: 'User avatar',
fallback: const Text('JD'),
);FAvatar.raw(...)
FAvatar.raw(
child: const Text('MN'),
style: (style) => style.copyWith(...),
size: 40.0,
);Examples
Raw
Row(
mainAxisAlignment: .center,
spacing: 10,
children: [
FAvatar.raw(),
FAvatar.raw(child: Icon(FIcons.baby, color: context.theme.colors.mutedForeground)),
FAvatar.raw(child: const Text('MN')),
],
);Fallback
Row(
mainAxisAlignment: .center,
spacing: 10,
children: [
FAvatar(image: const AssetImage(''), fallback: const Text('MN')),
FAvatar(image: const AssetImage('')),
],
);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.