{"id":50446742,"url":"https://github.com/graundtech/fluent2_kit","last_synced_at":"2026-05-31T22:01:06.534Z","repository":{"id":213591641,"uuid":"734456113","full_name":"graundtech/fluent2_kit","owner":"graundtech","description":"Fluent2 Design System Material based","archived":false,"fork":false,"pushed_at":"2026-05-22T15:52:45.000Z","size":6472,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-05-22T17:57:06.853Z","etag":null,"topics":["components","design-system","fluent","microsoft","theming"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/fluent2_kit","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/graundtech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-21T18:16:33.000Z","updated_at":"2026-05-22T15:52:54.000Z","dependencies_parsed_at":"2023-12-26T14:15:21.154Z","dependency_job_id":"e273023f-6bbb-4441-9cab-f84cb99cff56","html_url":"https://github.com/graundtech/fluent2_kit","commit_stats":null,"previous_names":["grbtec/gbt_fluent2_ui","indicacode/gbt_fluent2_ui","graundtech/idc_fluent2_ui","graundtech/fluent2ui","graundtech/fluent2_kit"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/graundtech/fluent2_kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2_kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2_kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2_kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2_kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graundtech","download_url":"https://codeload.github.com/graundtech/fluent2_kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2_kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33748626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","design-system","fluent","microsoft","theming"],"created_at":"2026-05-31T22:01:05.738Z","updated_at":"2026-05-31T22:01:06.524Z","avatar_url":"https://github.com/graundtech.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/05470ad4-c025-4e3f-b05a-776e90abaef8\" width=\"200\" /\u003e\n\u003c/p\u003e\n\n\n\u003cdiv align=\"center\"\u003e\n  Create beautiful, cohesive Microsoft experiences using Fluent 2.\u003cbr/\u003e\n  A Material-based Fluent 2 design system for Flutter.\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\n   \u003cimg src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/279b1f1c-b0e5-4a92-aea0-21ebbd3a9234\" alt=\"Fluent2 UI Design\" width=\"170px\"\u003e\n  \u003c!--\u003cimg src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/ddf28f29-edab-4d7d-98a4-5de492808d5a\" alt=\"Fluent2 UI Design\" width=\"170px\"\u003e--\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/graundtech/fluent2_kit/actions/workflows/android-example-apk.yml\"\u003e\n    \u003cimg src=\"https://github.com/graundtech/fluent2_kit/actions/workflows/android-example-apk.yml/badge.svg?branch=main\" alt=\"Android example APK build status\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/releases-manual-blue?style=flat-square\" alt=\"Releases: manual\" /\u003e\n\u003c/p\u003e\n\n## Installing\nAdd this to your `pubspec.yaml` file and run `dart pub get` to download the package.\n```dart\ndependencies:\n  fluent2_kit:\n```\nImport it in the files where it will be used:\n```dart\nimport 'package:fluent2_kit/fluent2_kit.dart';\n```\n\n### Coexisting with `fluent_ui`\n\n`fluent2_kit` targets the **Fluent 2 mobile/iOS spec** and uses class names like `FluentButton`, `FluentCard`, `FluentTextField`. The popular [`fluent_ui`](https://pub.dev/packages/fluent_ui) package targets the **Fluent UI desktop/Windows spec** and uses mostly unprefixed names (`Button`, `Card`, `TextBox`), so day-to-day collisions are rare.\n\nIf you do use both packages in the same project — for example, a cross-platform app with Windows desktop and iOS/Android targets — import one of them with an alias to avoid ambiguity on framework-level types (`FluentIcons`, `Fluent2ThemeData` vs `FluentThemeData`):\n\n```dart\nimport 'package:fluent2_kit/fluent2_kit.dart';\nimport 'package:fluent_ui/fluent_ui.dart' as fluent_desktop;\n```\n\nThen reference desktop-only types via the prefix:\n\n```dart\nfluent_desktop.NavigationView(...)   // Windows desktop nav\nFluentNavBar(...)                    // mobile Fluent 2 nav from fluent2_kit\n```\n\n\n\n## ✨ Features\n\n- Default theme based on Fluent 2\n- Useful components, including behavior\n- Almost no dependencies beyond Flutter\n\n\n## Local Android example builds\n\nThe example app can be packaged locally on demand:\n\n```sh\nscripts/build_android_example.sh --apk\n```\n\nUseful options:\n\n```sh\nscripts/build_android_example.sh --aab\nscripts/build_android_example.sh --both --clean\nscripts/build_android_example.sh --apk --build-number 49 --build-name 1.0.6\nscripts/build_android_example.sh --apk --skip-tests\n```\n\nSigned release builds use `example/android/key.properties` when present.\nWithout it, the Android project falls back to debug signing so the APK remains\ninstallable for local testing.\n\nExample `key.properties`:\n\n```properties\nstoreFile=upload-keystore.jks\nstorePassword=...\nkeyAlias=...\nkeyPassword=...\n```\n\n## Getting started\n\n\u003cimg width=\"980\" alt=\"cover_image\" src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/0a1ea39c-9cc0-4f92-8541-0d12d66f713d\"\u003e\n\n#### First, wrap your MaterialApp with FluentProvider\n\n```dart\n\nFluentProvider(\n  child: MaterialApp(...),\n);\n```\n\n### The FluentScaffold\nUse `FluentScaffold` instead of `Scaffold` when you need Fluent banners, toasts, or bottom-sheet behavior.\n```dart\n\nFluentScaffold(\n  appBar: FluentNavBar(...),\n  body: Placeholder(),\n);\n```\n\n### Theme\nImport light and dark theme to your project:\n```dart\nimport 'package:fluent2_kit/theme_data.dart' as theme_data;\n\nfinal theme = theme_data.theme;\nfinal darkTheme = theme_data.darkTheme;\n```\nOr you can pass your own brandColor:\n\u003e Tip: use [Smart Swatch Generator](https://smart-swatch.netlify.app/#7f22e2) to generate your color palette.\n\n```dart\nimport 'package:fluent2_kit/theme_data.dart';\n\nconst _brandColor = MaterialColor(\n  0xFF7f22e2,\n  \u003cint, Color\u003e{\n    50: Color(0xFFf5e6ff),\n    100: Color(0xFFd9bafa),\n    200: Color(0xFFbf8df2),\n    300: Color(0xFFa461eb),\n    400: Color(0xFF8934e4),\n    500: Color(0xFF701bcb),\n    600: Color(0xFF57149f),\n    700: Color(0xFF3e0e73),\n    800: Color(0xFF250747),\n  },\n);\n\nThemeData get theme =\u003e\n    getTheme(brandColor: _brandColor, brightness: Brightness.light,);\n\nThemeData get darkTheme =\u003e\n    getTheme(brandColor: _brandColor, brightness: Brightness.dark);\n\n```\n\nAnd add the theme to your MaterialApp:\n```dart\n\nFluentProvider(\n  child: MaterialApp(\n    themeAnimationDuration: Duration.zero,\n    darkTheme: darkTheme,\n    themeMode: themeMode,\n  ),\n);\n```\n\n\n## Fluent Icons\n\nImport  `FluentIcons`:\n```dart\nimport 'package:fluent2_kit/fluent_icons.dart';\n```\n\n\n## Design Tokens\nDesign tokens are stored values used to assign Fluent styles like color, typography, spacing, or elevation, without hardcoding pixels and hex codes.\n\n### CornerRadius\n`FluentThemeData` includes predefined corner radius values.\nUse the `FluentCornerRadius` radius tokens to change the corner radius on elements.\nYou can use the `FluentContainer` component, which is basically a Material Container with properties that are compatible with Fluent 2 UI design rules.\n```dart\nFluentContainer(\n cornerRadius: FluentCornerRadius.large,\n)\n```\n\n### Spacing Ramp\n It’s used in every component and layout to create a familiar and cohesive product experience, regardless of device or environment.\n Use `FluentSize` values:\n ```dart\nFluentContainer(\n padding: EdgeInsets.symmetric(horizontal: FluentSize.size160.value),\n )\n```\n### Typography\nThe typography tokens are sets of global tokens that include font size, line height, weight and family. \nUse `FluentText`, a component created to accept Fluent typography tokens. So you get this value directly from the theme.\n\n```dart\n   // ✅\n    FluentText(\n      \"Text 1\",\n      style: FluentThemeDataModel.of(context)\n          .fluentTextTheme\n          ?.body2,\n    ),\n    // ✅\n    FluentText(\n      \"Text 2\",\n      style: FluentThemeDataModel.of(context)\n          .fluentTextTheme\n          ?.caption1,\n    ),\n    // ❌ use the typography tokens from the theme\n    FluentText(\n      \"Wrong use\",\n      style: TextStyle(\n        fontSize: 20,\n        fontWeight: FontWeight.w800,\n      ),\n    )\n```\n If you need to change a text style value such as color, use `fluentCopyWith()`:\n ```dart\nFluentText(\n  \"Text\",\n  style: FluentThemeDataModel.of(context)\n      .fluentTextTheme\n      ?.body2?.fluentCopyWith(\n    fluentColor: Colors.pink\n  ),\n)\n```\n### Shadows\nFluent offers six sets of shadows, each consisting of two layers.\nWe have 2 elevation ramps:\n\n- low elevation ramp (shadow2, shadow4, shadow8, shadow16)\n- high elevation ramp (shadow28, shadow64)\n\nIf you choose brand shadow tokens, the *luminosity equation* will be applied to the shadow color.\nYou can use them choosing the value from the theme:\n```dart\nFluentContainer(\n  shadow: FluentThemeDataModel.of(context).fluentShadowTheme?.shadow2,\n  width: 100,\n  height: 100,\n),\nFluentContainer(\n  color: FluentColors.of(context)?.brandBackground1Rest,\n  shadow: FluentThemeDataModel.of(context).fluentShadowTheme?.brandShadow64,\n  width: 100,\n  height: 100,\n)\n```\n\n### Stroke\n`FluentContainer` has the strokeStyle property where you can pass stroke styles, and to create lines you can use `FluentStrokeDivider`:\n\n```dart\nFluentStrokeDivider(\n style: FluentStrokeStyle(color: Colors.blue,thickness: FluentStrokeThickness.strokeWidth20),\n startIndent: FluentStrokeBorderIndent.strokeIndent16,\n)\n```\n\nYou can choose the neutral strokes of the theme, the neutral strokes are: Accessible, Stroke1, Stroke2, StrokeDisabled.\n\n```dart\nFluentContainer(\n  strokeStyle: FluentThemeDataModel.of(context).fluentStrokeTheme?.strokeAccessible,\n  width: 100,\n  height: 100,\n)\n```\n\nOr you can pass the weight of the stroke, color, distribution, and endpoint properties.\n\n```dart\nFluentContainer(\n  strokeStyle: FluentStrokeStyle(\n    thickness: FluentStrokeThickness.strokeWidth15,\n    color: Colors.red,\n    padding: 2,\n    dashArray: [\n      2,1,2,1\n    ]\n  ),\n  width: 100,\n  height: 100,\n)\n```\n### Color Tokens\nUse the `FluentColors` and  `FluentDarkColors` classes.\n**Interaction States:**\nAccording to the documentation, the Fluent palettes are often used to indicate interaction states on components.\n```dart\ncolor: FluentColors.of(context)?.brandForeground1Selected\n```\n```dart\ncolor: FluentColors.of(context)?.brandBackground1Pressed\n```\n\n#### Neutral Colors\nThese colors are used on surfaces, text, and layout elements.\nIn Light Theme:\n```dart\ncolor: FluentColors.neutralBackground1Rest\n```\nIn Dark Theme:\n```dart\ncolor: FluentDarkColors.neutralBackground1Rest\n```\n#### Brand colors\nYou pass the context, and the color dynamically adjusts for dark mode.\n```dart\ncolor: FluentColors.of(context)?.brandBackground1Rest\n```\n```dart\ncolor: FluentColors.of(context).brandBackgroundTintRest\n```\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/1714d3eb-9f2c-4311-988b-65655b722245\" alt=\"dark-theme-part1\" height=\"550px\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/bafb23a4-9b4a-4a16-8973-70aae6c1da35\" alt=\"dark-theme-part2\" height=\"550px\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/fdc98b74-e800-43e0-9f26-d32223fa60af\" alt=\"dark-theme-part1\" height=\"550px\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/8de5b645-11fb-4ff6-8b84-3d00e1bc295e\" alt=\"dark-theme-part2\" height=\"550px\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n\n# 🧩 Components\n  \n\n\n## Fluent Avatar\n\n### Types:\n\n- Standard: circular containers that generally represent an individual.\n\n```dart\nFluentAvatar(\n  child: Image.asset(\n    \"assets/images/avatars/avatar1.jpeg\",\n    fit: BoxFit.cover,\n    width: double.maxFinite,\n    height: double.maxFinite,\n  ),\n),\n```\n\n- Group: square containers that represent many people, like teams, organizations, or companies.\n\n```dart\n FluentAvatar(\n  isGroup: true,\n  ...\n)\n```\n\n### Behavior\n\n### Presence Badges\n\nThere are 8 avatar badge variants: `away`, `available`, `dnd`, `offline`, `unknown`, `busy`, `blocked`, `oof`.\n\n```dart\n FluentAvatar(\n  statusPresenceBadge: StatusPresenceBadge.available,\n  ...\n)\n```\n\n### Activity Rings\n\n```dart\nFluentAvatar(\n  strokeStyle: FluentStrokeStyle(\n    padding: 4,\n    thickness: FluentStrokeThickness.strokeWidth30,\n    color: Colors.purple\n  ),\n  child: Image.asset(\n    \"assets/images/avatars/avatar1.jpeg\",\n    fit: BoxFit.cover,\n    width: double.maxFinite,\n    height: double.maxFinite,\n  ),\n)\n```\n\n### Cutout\n\nAvatars at 40 and 56 pixels can display a cutout that communicates other dynamic information, like reactions, mentions, and recent file activity.\n\n```dart\nFluentAvatar(\n  size: FluentAvatarSize.size56,\n  cutoutSize: CutoutSize.size28,\n  cutout: Icon(\n    FluentIcons.heart_12_filled\n  ),\n  child: Image.asset(...),\n)\n```\n\n```dart\nFluentAvatar(\n  size: FluentAvatarSize.size56,\n  cutoutSize: CutoutSize.size20,\n  cutout: Icon(\n    FluentIcons.heart_12_filled,\n    size: 16,\n  ),\n  child: Image.asset(...),\n)\n```\n\n\n## Fluent Button\n\nStandard action button. `title` and `onPressed` are required; everything else is optional.\n\n### Sizes\nThe `FluentButtonSize` class has the following variations:\n- `Large` (52pt)\n- `Medium` (40pt, default)\n- `Small` (28pt)\n\n```dart\nFluentButton(\n  title: \"Click Me\",\n  size: FluentButtonSize.medium,\n  onPressed: () {},\n)\n```\n### Variants\nThe `FluentButtonVariant` class contains the following variants:\n\n- `Accent` (default)\n- `Outline Accent`\n- `Outline`\n- `Subtle`\n\n```dart\nFluentButton(\n  title: \"Click Me\",\n  variant: FluentButtonVariant.accent,\n  onPressed: () {},\n)\n```\n\n### Leading icon\n\nPass an `Icon` to render before the label.\n\n```dart\nFluentButton(\n  title: \"Like\",\n  icon: Icon(FluentIcons.heart_12_filled),\n  onPressed: () {},\n)\n```\n\n### Disabled\n\nPass `onPressed: null` to render the disabled state.\n\n```dart\nFluentButton(\n  title: \"Click Me\",\n  onPressed: null,\n)\n```\n\n### Full width\n\nSet `isFullWidget: true` to stretch the button to the available width.\n\n```dart\nFluentButton(\n  title: \"Continue\",\n  isFullWidget: true,\n  onPressed: () {},\n)\n```\n\n\n## Fluent FAB\n\nFloating action button (FAB) for a screen's primary action. Renders as a circular icon-only button by default, or as an extended pill when a `label` is provided.\n\n### Sizes\nThe `FluentFabSize` class has the following variations:\n- `Large` (56pt, default)\n- `Small` (48pt)\n\n### Variants\nThe `FluentFabVariant` class contains the following variants:\n- `Accent` (brand background, default)\n- `Subtle` (neutral background)\n\n```dart\n// Icon-only FAB\nFluentFab(\n  icon: FluentIcons.add_24_filled,\n  onPressed: () {},\n)\n\n// Extended FAB with label\nFluentFab(\n  icon: FluentIcons.add_24_filled,\n  label: \"Create\",\n  onPressed: () {},\n)\n```\n\n\n## Fluent Navigation Bar\n\nYou can choose the brand or neutral variant in the Fluent NavBar.\n\n```dart\nFluentNavBar(\n  themeColorVariation: FluentThemeColorVariation.brand,\n)\n```\n\n### Leading\n\n```dart\nFluentNavBar(\n  leading: Icon(FluentIcons.leaf_two_32_filled),\n)\n```\n\n### Gradient\n\nSupports the `gradient` property:\n\n```dart\nFluentNavBar(\n  title: NavCenterTitle(title: \"Title\"),\n  themeColorVariation: FluentThemeColorVariation.brand,\n  gradient: LinearGradient(\n    colors: [\n      Colors.purple,\n      Colors.deepPurple,\n    ],\n  ),\n)\n```\n \n### Nav title\n\nThere are 4 variants for nav title: `Left title`, `Left subtitle`, `Center title`, `Center`\n\n```dart\nFluentNavBar(\n  themeColorVariation: FluentThemeColorVariation.brand,\n  title: NavLeftSubtitle(title: \"Title\", subtitle: \"My subtitle\",),\n)\n```\n\n### Nav actions\n\nA list of widgets, the actions that will appear in the right side of nav bar:\n\n```dart\nFluentNavBar(\n  themeColorVariation: FluentThemeColorVariation.brand,\n  title: NavLeftSubtitle(title: \"Title\", subtitle: \"My subtitle\",),\n  actions: [\n    Icon(FluentIcons.airplane_24_regular),\n    Icon(FluentIcons.access_time_20_regular),\n    Icon(FluentIcons.sparkle_20_filled),\n  ],\n)\n```\n\n\n## Fluent List\n\nThere are two variants and you can choose them using the named constructor:\n\n\n- OneLine\n\n```dart\nFluentList.oneLine(\n  //  Here you can only pass a list of FluentListItemOneLine\n  listItems: [...],\n)\n```\n\n\u003cimg width=\"373\" alt=\"Screenshot 2024-02-20 at 16 07 11\" src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/c3f383f3-96a7-414c-8dd1-1694f19ab956\"\u003e\n\n\n\n- MultiLine\n\n```dart\nFluentList.multiLine(\n  //  Here you can only pass a list of FluentListItemMultiLine\n  listItems: [...],\n)\n```\n\u003cimg width=\"381\" alt=\"Screenshot 2024-02-20 at 16 06 47\" src=\"https://github.com/graundtech/fluent2_kit/assets/94455123/f1bdb093-9b51-41ef-8e6b-af8b911bb3d3\"\u003e\n\n\nFluentList has the following props:\n\n- `sectionHeaderTitle`\n\n- `sectionHeaderTitleIcon`: The leading icon of section header\n\n- `sectionHeaderBackgroundColor`\n\n- `sectionHeaderTitleVariant`: You can choose the bold or subtle value.\n\n- `sectionHeaderActions`: Receives a FluentSectionHeaderActions where you can pass two action widgets.\n\n- `sectionDescriptionText`\n\n- `sectionDescriptionBackgroundColor`\n\n- `sectionDescriptionIcon`: The icon that will appear in your section description. \n\n- `separator`: A separator to your list.\n\n```dart\nFluentList.multiLine(\n  sectionHeaderTitle: \"Notifications\",\n  sectionHeaderTitleVariant: SectionHeaderTitleVariant.bold,\n  sectionHeaderActions: FluentSectionHeaderActions(\n    action1: Icon(FluentIcons.circle_20_regular),\n    action2: Icon(FluentIcons.circle_20_regular),\n  ),\n  sectionDescriptionText: \"Choose how alerts appear on your device.\",\n  separator: FluentStrokeDivider(),\n  sectionDescriptionIcon: FluentIcons.leaf_three_16_filled,\n  listItems: [\n    FluentListItemMultiLine(text: \"Item 1\"),\n    FluentListItemMultiLine(text: \"Item 2\"),\n  ],\n)\n```\n\n\n## Fluent Card\n\n```dart\nFluentCard(\n  text: \"Text\",\n  subText: \"Subtext\",\n  leading: Image.asset(\n    \"assets/images/cards/card2.jpeg\",\n    fit: BoxFit.cover,\n    width: double.maxFinite,\n    height: double.maxFinite,\n  ),\n  coverImage: Image.asset(\n    \"assets/images/cards/card2.jpeg\",\n    fit: BoxFit.cover,\n    width: double.maxFinite,\n    height: double.maxFinite,\n  ),\n  onPressed: () {},\n)\n```\n\nIf you just want to use a flexible container with card styles, you can use `FluentCardContainer`:\n\n```dart\nFluentCardContainer(\n  padding: EdgeInsets.all(FluentSize.size160.value),\n  child: Text(\"Card content\"),\n)\n```\n\n\n## Fluent Radio Button\n\n```dart\nFluentRadioButton\u003cOption\u003e(\n  value: Option.option1,\n  groupValue: _option,\n  onChanged: (value) {},\n)\n```\nDisabled:\n```dart\nFluentRadioButton\u003cOption\u003e(\n    value: Option.option1,\n    groupValue: _option,\n    onChanged: null,\n  )\n```\n\n\n## Fluent Checkbox\n\n```dart\nFluentCheckbox(\n  value: isCheckbox1,\n  onChanged: (value) {},\n)\n```\nDisabled:\n\n```dart\nFluentCheckbox(\n  value: isCheckbox1,\n  onChanged: null,\n)\n```\n\n\n\n## Fluent Switch Toggle\n\n```dart\nFluentSwitchToggle(\n  value: showIcons,\n  onChanged: (value) =\u003e setState(() {\n    showIcons = value;\n  }),\n)\n```\nDisabled:\n\n```dart\nFluentSwitchToggle(\n  value: showIcons,\n  onChanged: null,\n)\n```\n\n\n\n## Fluent Segmented Control\n\nLets people pick one option from a small set of mutually exclusive choices. Use the named constructors `.textItems` or `.iconItems`.\n\n### Types\n`FluentSegmentedControlType` values:\n- `tabs` (default): a sliding thumb inside a single pill track.\n- `pillButton`: separate, spaced pills.\n\n### Variants\n`FluentSegmentedControlVariant` values:\n- `neutral` (default): neutral track with brand-colored selected segment.\n- `brand`: brand track with neutral-colored selected segment.\n\n### Text items\n\n```dart\nfinal controller = FluentSegmentedController\u003cSky\u003e(value: Sky.midnight);\n\nFluentSegmentedControl\u003cSky\u003e.textItems(\n  fluentController: controller,\n  textItems: const {\n    Sky.midnight: \"Midnight\",\n    Sky.viridian: \"Viridian\",\n    Sky.cerulean: \"Cerulean\",\n  },\n  onValueChanged: (value) {\n    // handle selection\n  },\n)\n```\n\n### Icon items (pill button, brand)\n\n```dart\nFluentSegmentedControl\u003cViewMode\u003e.iconItems(\n  segmentType: FluentSegmentedControlType.pillButton,\n  variant: FluentSegmentedControlVariant.brand,\n  iconItems: const {\n    ViewMode.grid: FluentIcons.grid_20_regular,\n    ViewMode.list: FluentIcons.list_20_regular,\n  },\n  onValueChanged: (value) {\n    // handle selection\n  },\n)\n```\n\n\n## Fluent Banner\n\n```dart\nfinal myBanner = FluentBanner(\n      bannerColor: FluentBannerColor.accent,\n      text: \"Your changes were saved.\",\n    );\n```\n\nAdding Fluent Banner\n\n```dart\nFluentButton(\n  title: \"Open Banner\",\n  onPressed: () async {\n    FluentScaffoldMessenger.of(context).addBanner(myBanner);\n  },\n)\n```\n\nRemoving Fluent Banner\n\n```dart\n FluentButton(\n  title: \"Close Banner\",\n  onPressed: () async {\n    FluentScaffoldMessenger.of(context).removeBanner(myBanner);\n  },\n)\n```\n\n\n\n## Fluent Toast\n`FluentToast` has 4 variants of FluentToastColor:\n\n- `Accent`\n\n- `Neutral`\n\n- `Danger`\n\n- `Warning`\n\n```dart\nFluentButton(\n  title: \"Accent Toast\",\n  onPressed: (){\n    FluentToast(\n        toastColor: FluentToastColor.accent,\n        text: \"Fluent 2 is here\",\n        subText: \"See what’s changed.\",\n        icon: Icon(FluentIcons.sparkle_20_filled),\n        action: Builder(\n          builder: (context) =\u003e IconButton(\n            onPressed: () {\n              FluentToastOverlayEntry.of(context).remove();\n            },\n            icon: Icon(Icons.cancel),\n          ),\n        )).show(\n      context: context,\n      duration: null,\n      onDismissed: () {\n        print(\"Closed!\");\n      },\n    );\n  },\n)\n```\n\n\n\n## Fluent Text Field\n\nUnderlined text input mirroring the Microsoft Fluent 2 iOS spec. Supports a floating label, hint (placeholder), assistive/error text, prefix and suffix icons, and an automatic trailing dismiss icon when the field is focused and not empty.\n\n```dart\nFluentTextField(\n  label: \"Last Name\",\n  hintText: \"Ballinger\",\n  onChanged: (value) {},\n  obscureText: false,\n  readOnly: false,\n  suffixIcon: Icon(FluentIcons.leaf_three_16_filled),\n  hasError: error != null,\n  assistiveText: error ?? \"assistive\",\n)\n```\n\n### Visual states\n\nThe component renders the six states defined by the Fluent 2 iOS spec:\n\n```dart\n// Filled — has value, not focused\nFluentTextField(\n  label: \"Label\",\n  controller: FluentTextFieldController()..textEditingController.text = \"Input text\",\n  assistiveText: \"Assistive text\",\n  prefixIcon: Icon(FluentIcons.search_24_regular),\n)\n\n// Placeholder — empty, not focused\nFluentTextField(\n  label: \"Label\",\n  hintText: \"Hint text\",\n  assistiveText: \"Assistive text\",\n  prefixIcon: Icon(FluentIcons.search_24_regular),\n)\n\n// Focused — empty, focused (label and underline turn brand blue)\nFluentTextField(\n  label: \"Label\",\n  hintText: \"Hint text\",\n  assistiveText: \"Assistive text\",\n  prefixIcon: Icon(FluentIcons.search_24_regular),\n  autofocus: true,\n)\n\n// Typing — has value, focused (auto-shows trailing dismiss icon)\nFluentTextField(\n  label: \"Label\",\n  controller: FluentTextFieldController()..textEditingController.text = \"Input text\",\n  assistiveText: \"Assistive text\",\n  prefixIcon: Icon(FluentIcons.search_24_regular),\n)\n\n// Error — label, underline, and assistive text turn red\nFluentTextField(\n  label: \"Label\",\n  controller: FluentTextFieldController()..textEditingController.text = \"Input text\",\n  hasError: true,\n  assistiveText: \"Password must contain 8 characters and include letters, numbers and symbols\",\n  prefixIcon: Icon(FluentIcons.search_24_regular),\n)\n\n// Disabled — hint text uses the disabled neutral foreground (#BDBDBD)\nFluentTextField(\n  label: \"Label\",\n  hintText: \"Hint text\",\n  assistiveText: \"Assistive text\",\n  prefixIcon: Icon(FluentIcons.lock_closed_24_regular),\n  enabled: false,\n)\n```\n\n### Additional capabilities\n\n`FluentTextField` also exposes the underlying Flutter `TextField` surface for advanced use cases:\n\n- **Multi-line input**: `maxLines`, `expands`, `scrollController`.\n- **Character counter**: `maxLength`, `buildCounter`.\n- **Password / obscured input**: `obscureText`, `obscuringCharacter`.\n- **Prefix variants**: `prefixIcon` (icon column on the left) and `prefix` (inline widget inside the input).\n- **Cursor customization**: `cursorErrorColor`, `cursorHeight`, custom magnifier via `magnifierConfiguration`.\n- **Input behavior**: `keyboardType`, `inputFormatters`, `autocorrect`, `enableSuggestions`, `autofocus`, `canRequestFocus`, `clipBehavior`, `textAlign`.\n- **Callbacks**: `onChanged`, `onTap`, `onEditingComplete`, `onSubmitted`.\n\n\n\n\n## Fluent Progress Bar\n```dart\nif (isUpdating)\n  FluentProgressBar(\n    value: null,\n  )\n```\n\n\n\n## Fluent Heads-up Display\n\n```dart\n FluentButton(\n    title: \"Open HUD\",\n    onPressed: () {\n      FluentHeadsUpDisplayDialog(\n        future: Future.delayed(Duration(seconds: 1)),\n        confirmStopMessage: \"Are you sure you want to close this?\",\n        hud: FluentHeadsUpDisplay(\n          text: \"Refreshing Data...\",\n        ),\n      ).show(context);\n    },\n  )\n```\n\n\n\n## 📚 Additional information\n\nThis is mainly inspired by the Fluent 2 iOS Figma UI Kit. It will be gradually adapted to Android as Microsoft releases its Figma UI Kit.\n\n### References\n\n- [Fluent 2 — iOS components](https://fluent2.microsoft.design/components/ios/)\n- [Fluent 2 iOS UI Kit (Figma Community)](https://www.figma.com/community/file/836833645402438850)\n\n## 💛 Acknowledgments\n\nSpecial thanks to the two main developers behind this project, whose work shaped most of the components and patterns in `fluent2_kit`:\n\n- **Leticya Sheyla** — [@LeticyaSheyla](https://github.com/LeticyaSheyla)\n- **Railson Ferreira** — [@railson-ferreira](https://github.com/railson-ferreira)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraundtech%2Ffluent2_kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraundtech%2Ffluent2_kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraundtech%2Ffluent2_kit/lists"}