Data Presentation
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.
Overview
1@override2Widget build(BuildContext _) => FBadge(child: const Text('Badge'));3CLI
To generate and customize this style:
dart run forui style create badgesUsage
FBadge(...)
1FBadge(2 style: const .inherit(),3 child: const Text('Badge'),4)FBadge.raw(...)
1FBadge.raw(2 style: const .inherit(),3 builder: (context, style) => const Text('Badge'),4)Examples
Primary
1@override2Widget build(BuildContext _) => FBadge(child: const Text('Badge'));3Secondary
1@override2Widget build(BuildContext _) => FBadge(3 variants: {.secondary},4 child: const Text('Badge'),5);6Outline
1@override2Widget build(BuildContext _) => FBadge(3 variants: {.outline},4 child: const Text('Badge'),5);6Destructive
1@override2Widget build(BuildContext _) => FBadge(3 variants: {.destructive},4 child: const Text('Badge'),5);6Avatar
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.
Calendar
A calendar component for selecting and editing dates.