GitHub Workflow Status (with event)

Create beautiful, cohesive Microsoft experiences using Fluent 2.
Fluent2 Design System Material based

Fluent2 UI Design

Installing

Add in your pubspec.yaml file and run dart pub get to download the package.

dependencies:
  fluent2_kit:

Import in files that it will be used

import 'package:fluent2_kit/fluent2_kit.dart';

Coexisting with `fluent_ui`

fluent2_kit targets the Fluent 2 mobile/iOS spec and uses class names like FluentButton, FluentCard, FluentTextField. The popular 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.

If 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):

import 'package:fluent2_kit/fluent2_kit.dart';
import 'package:fluent_ui/fluent_ui.dart' as fluent_desktop;

Then reference desktop-only types via the prefix:

fluent_desktop.NavigationView(...)   // Windows desktop nav
FluentNavBar(...)                    // mobile Fluent 2 nav from fluent2_kit

✨ Features

Default theme based on Fluent2
Useful components (including the behavior)
Almost no dependencies but Flutter

Getting started

First of all, let's wrap our MaterialApp with FluentProvider


FluentProvider(
  child: MaterialApp(...),
);

The FluentScaffold

Don't forget.
In order to make things work, make sure to always use FluentScaffold rather than Scaffold.


FluentScaffold(
  appBar: FluentNavBar(...),
  body: Placeholder(),
);

Theme

Import light and dark theme to your project:

import 'package:fluent2_kit/theme_data.dart' as theme_data;

final theme = theme_data.theme;
final darkTheme = theme_data.darkTheme;

Or you can pass your own brandColor:
Suggestion: use Smart Swatch Generator to get your color palette

import 'package:fluent2_kit/theme_data.dart';

const _brandColor = MaterialColor(
  0xFF7f22e2,
  <int, Color>{
    50: Color(0xFFf5e6ff),
    100: Color(0xFFd9bafa),
    200: Color(0xFFbf8df2),
    300: Color(0xFFa461eb),
    400: Color(0xFF8934e4),
    500: Color(0xFF701bcb),
    600: Color(0xFF57149f),
    700: Color(0xFF3e0e73),
    800: Color(0xFF250747),
  },
);

ThemeData get theme =>
    getTheme(brandColor: _brandColor, brightness: Brightness.light,);

ThemeData get darkTheme =>
    getTheme(brandColor: _brandColor, brightness: Brightness.dark);

And add the theme to your MaterialApp:


FluentProvider(
  child: MaterialApp(
    themeAnimationDuration: Duration.zero,
    darkTheme: darkTheme,
    themeMode: themeMode,
  ),
);

Fluent Icons

Import FluentIcons:

import 'package:fluent2_kit/fluent_icons.dart';

Design Tokens

Design tokens are stored values used to assign Fluent styles like color, typography, spacing, or elevation, without hardcoding pixels and hex codes.

CornerRadius

The FluentThemeData alright have the predefined values to use in cornerRadius.

Use the FluentCornerRadius radius tokens to change the corner radius on elements.
You can use the FluentContainer component, which is basically a Material Container with properties that are compatible with Fluent 2 UI design rules.

FluentContainer(
 cornerRadius: FluentCornerRadius.large,
)

Spacing Ramp

It’s used in every component and layout to create a familiar and cohesive product experience, regardless of device or environment.
Use FluentSize values:

FluentContainer(
padding: EdgeInsets.symmetric(horizontal: FluentSize.size160.value),
)

Typography

The typography tokens are sets of global tokens that include font size, line height, weight and family.

Use Fluent Text, a component created to accept Fluent typography tokens. So you get this value directly from the theme.

   // ✅
    FluentText(
      "Text 1",
      style: FluentThemeDataModel.of(context)
          .fluentTextTheme
          ?.body2,
    ),
    // ✅
    FluentText(
      "Text 2",
      style: FluentThemeDataModel.of(context)
          .fluentTextTheme
          ?.caption1,
    ),
    // ❌ use the typography tokens from the theme
    FluentText(
      "Wrong use",
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w800,
      ),
    )

But if you need to change some style of text like color, then you can use the fluentCopyWith():

FluentText(
 "Text",
 style: FluentThemeDataModel.of(context)
     .fluentTextTheme
     ?.body2?.fluentCopyWith(
   fluentColor: Colors.pink
 ),
)

Shadows

Fluent offers six sets of shadows, each consisting of two layers.
We have 2 elevation ramps:

low elevation ramp (shadow2, shadow4, shadow8, shadow16)
high elevation ramp (shadow28, shadow64)

If you choose brand shadow tokens to apply shadows to colors so the luminosity equation will be aplyed.
You can use them choosing the value from the theme:

FluentContainer(
  shadow: FluentThemeDataModel.of(context).fluentShadowTheme?.shadow2,
  width: 100,
  height: 100,
),
FluentContainer(
  color: FluentColors.of(context)?.brandBackground1Rest,
  shadow: FluentThemeDataModel.of(context).fluentShadowTheme?.brandShadow64,
  width: 100,
  height: 100,
)

Stroke

FluentContainer has the strokeStyle property where you can pass stroke styles, and to create lines you can use FluentStrokeDivider:

FluentStrokeDivider(
 style: FluentStrokeStyle(color: Colors.blue,thickness: FluentStrokeThickness.strokeWidth20),
 startIndent: FluentStrokeBorderIndent.strokeIndent16,
)

You can choose the neutral strokes of the theme, the neutral strokes are: Accessible, Stroke1, Stroke2, StrokeDisabled.

FluentContainer(
  strokeStyle: FluentThemeDataModel.of(context).fluentStrokeTheme?.strokeAccessible,
  width: 100,
  height: 100,
)

Or you can pass the weight of the stroke, color, distribution, and endpoint properties.

FluentContainer(
  strokeStyle: FluentStrokeStyle(
    thickness: FluentStrokeThickness.strokeWidth15,
    color: Colors.red,
    padding: 2,
    dashArray: [
      2,1,2,1
    ]
  ),
  width: 100,
  height: 100,
)

Color Tokens

Use the FluentColors and FluentDarkColors classes.

Interaction States:
According to the documentation, the Fluent palettes are often used to indicate interaction states on components.

color: FluentColors.of(context)?.brandForeground1Selected

color: FluentColors.of(context)?.brandBackground1Pressed

Neutral Colors

These colors are used on surfaces, text, and layout elements.

In Light Theme:

color: FluentColors.neutralBackground1Rest

In Dark Theme:

color: FluentDarkColors.neutralBackground1Rest

Brand colors

You pass the context, and the color dynamically adjusts for dark mode.

color: FluentColors.of(context)?.brandBackground1Rest

color: FluentColors.of(context).brandBackgroundTintRest

🧩 Components

Fluent Avatar

Types:

Standard: circular containers that generally represent an individual.

FluentAvatar(
  child: Image.asset(
    "assets/images/avatars/avatar1.jpeg",
    fit: BoxFit.cover,
    width: double.maxFinite,
    height: double.maxFinite,
  ),
),

Group: square containers that represent many people, like teams, organizations, or companies.

 FluentAvatar(
  isGroup: true,
  ...
)

Behavior

Presence Badges

There are 8 avatar badge variants: away, avaliable, dnd, offline, unknown, busy,blocked,oof.

 FluentAvatar(
  statusPresenceBadge: StatusPresenceBadge.avaliable,
  ...
)

Activity Rings

FluentAvatar(
  strokeStyle: FluentStrokeStyle(
    padding: 4,
    thickness: FluentStrokeThickness.strokeWidth30,
    color: Colors.purple
  ),
  child: Image.asset(
    "assets/images/avatars/avatar1.jpeg",
    fit: BoxFit.cover,
    width: double.maxFinite,
    height: double.maxFinite,
  ),
)

Cutout

Avatars at 40 and 56 pixels can display a cutout that communicates other dynamic information, like reactions, mentions, and recent file activity.

FluentAvatar(
  size: FluentAvatarSize.size56,
  cutoutSize: CutoutSize.size28,
  cutout: Icon(
    FluentIcons.heart_12_filled
  ),
  child: Image.asset(...),
)

FluentAvatar(
  size: FluentAvatarSize.size56,
  cutoutSize: CutoutSize.size20,
  cutout: Icon(
    FluentIcons.heart_12_filled,
    size: 16,
  ),
  child: Image.asset(...),
)

Fluent Button

Standard action button. title and onPressed are required; everything else is optional.

Sizes

The FluentButtonSize class has the following variations:

Large (52pt)
Medium (40pt, default)
Small (28pt)

FluentButton(
  title: "Click Me",
  size: FluentButtonSize.medium,
  onPressed: () {},
)

Variants

The FluentButtonVariant class contains the following variants:

Accent (default)
Outline Accent
Outline
Subtle

FluentButton(
  title: "Click Me",
  variant: FluentButtonVariant.accent,
  onPressed: () {},
)

Leading icon

Pass an Icon to render before the label.

FluentButton(
  title: "Like",
  icon: Icon(FluentIcons.heart_12_filled),
  onPressed: () {},
)

Disabled

Pass onPressed: null to render the disabled state.

FluentButton(
  title: "Click Me",
  onPressed: null,
)

Full width

Set isFullWidget: true to stretch the button to the available width.

FluentButton(
  title: "Continue",
  isFullWidget: true,
  onPressed: () {},
)

Fluent FAB

Floating 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.

Sizes

The FluentFabSize class has the following variations:

Large (default, 56pt)
Small (48pt)

Variants

The FluentFabVariant class contains the following variants:

Accent (default, brand background)
Subtle (neutral background)

// Icon-only FAB
FluentFab(
  icon: FluentIcons.add_24_filled,
  onPressed: () {},
)

// Extended FAB with label
FluentFab(
  icon: FluentIcons.add_24_filled,
  label: "Create",
  onPressed: () {},
)

You can choose the brand or neutral variant in the Fluent NavBar.

FluentNavBar(
  themeColorVariation: FluentThemeColorVariation.brand,
)

Leading

FluentNavBar(
  leading: Icon(FluentIcons.leaf_two_32_filled),
)

Gradient

Suports the gradient propertie:

FluentNavBar(
  title: NavCenterTitle(title: "Title"),
  themeColorVariation: FluentThemeColorVariation.brand,
  gradient: LinearGradient(
    colors: [
      Colors.purple,
      Colors.deepPurple,
    ],
  ),
)

Nav title

There are 4 variants for nav title: Left title, Left subtitle, Center title, Center

FluentNavBar(
  themeColorVariation: FluentThemeColorVariation.brand,
  title: NavLeftSubtitle(title: "Title", subtitle: "My subtitle",),
)

Nav actions

A list of widgets, the actions that will appear in the right side of nav bar:

FluentNavBar(
  themeColorVariation: FluentThemeColorVariation.brand,
  title: NavLeftSubtitle(title: "Title", subtitle: "My subtitle",),
  actions: [
    Icon(FluentIcons.airplane_24_regular),
    Icon(FluentIcons.access_time_20_regular),
    Icon(FluentIcons.sparkle_20_filled),
  ],
)

Fluent List

There are two variants and you can choose them using the named constructor:

OneLine

FluentList.oneLine(
  //  Here you can only pass a list of FluentListItemOneLine
  listItems: [...],
)

MultiLine

FluentList.multiLine(
  //  Here you can only pass a list of FluentListItemMultiLine
  listItems: [...],
)

FluentList has the following props:

sectionHeaderTitle
sectionHeaderTitleIcon: The leading icon of section header
sectionHeaderBackgroundColor
sectionHeaderTitleVariant: You can choose the bold or subtle value.
sectionHeaderActions: Receives a FluentSectionHeaderActions where you can pass two action widgets.
sectionDescriptionText
sectionDescriptionBackgroundColor
sectionDescriptionIcon: The icon that will appear in your section description.
separator: A separator to your list.

FluentList.multiLine(
  sectionHeaderTitle: "I'm header title",
  sectionHeaderTitleVariant: SectionHeaderTitleVariant.bold,
  sectionHeaderActions: FluentSectionHeaderActions(
    action1: Icon(FluentIcons.circle_20_regular),
    action2: Icon(FluentIcons.circle_20_regular),
  ),
  sectionDescriptionText: "This is my list description",
  separator: FluentStrokeDivider(),
  sectionDescriptionIcon: FluentIcons.leaf_three_16_filled,
  listItems: [
    FluentListItemMultiLine(text: "Item 1"),
    FluentListItemMultiLine(text: "Item 2"),
  ],
)

Fluent Card

FluentCard(
  text: "Text",
  subText: "Subtext",
  leading: Image.asset(
    "assets/images/cards/card2.jpeg",
    fit: BoxFit.cover,
    width: double.maxFinite,
    height: double.maxFinite,
  ),
  coverImage: Image.asset(
    "assets/images/cards/card2.jpeg",
    fit: BoxFit.cover,
    width: double.maxFinite,
    height: double.maxFinite,
  ),
  onPressed: () {
    //   put your onPressed function here
  },
)

If you just want to use a flexible container with card styles, you can use FluentCardContainer:

FluentCardContainer(
  padding: EdgeInsets.all(FluentSize.size160.value),
  child: Text("Hi, i'm a text"),
)

Fluent Radio Button

FluentRadioButton<Option>(
  value: Option.option1,
  groupValue: _option,
  onChanged: (value) {
  //   put your onChanged function here
  },
)

Disabled:

FluentRadioButton<Option>(
    value: Option.option1,
    groupValue: _option,
    onChanged: null,
  )

Fluent Checkbox

FluentCheckbox(
  value: isCheckbox1,
  onChanged: (value) {
    // put your onChanged function here
  },
)

Disabled:

FluentCheckbox(
  value: isCheckbox1,
  onChanged: null,
)

Fluent Switch Toggle

FluentSwitchToggle(
  value: showIcons,
  onChanged: (value) => setState(() {
    showIcons = value;
  }),
)

Disabled:

FluentSwitchToggle(
  value: showIcons,
  onChanged: null,
)

Fluent Segmented Control

Lets people pick one option from a small set of mutually exclusive choices. Use the named constructors .textItems or .iconItems.

Types

FluentSegmentedControlType values:

tabs (default): a sliding thumb inside a single pill track.
pillButton: separate, spaced pills.

Variants

FluentSegmentedControlVariant values:

neutral (default): neutral track with brand-colored selected segment.
brand: brand track with neutral-colored selected segment.

Text items

final controller = FluentSegmentedController<Sky>(value: Sky.midnight);

FluentSegmentedControl<Sky>.textItems(
  fluentController: controller,
  textItems: const {
    Sky.midnight: "Midnight",
    Sky.viridian: "Viridian",
    Sky.cerulean: "Cerulean",
  },
  onValueChanged: (value) {
    // handle selection
  },
)

Icon items (pill button, brand)

FluentSegmentedControl<ViewMode>.iconItems(
  segmentType: FluentSegmentedControlType.pillButton,
  variant: FluentSegmentedControlVariant.brand,
  iconItems: const {
    ViewMode.grid: FluentIcons.grid_20_regular,
    ViewMode.list: FluentIcons.list_20_regular,
  },
  onValueChanged: (value) {
    // handle selection
  },
)

final myBanner = FluentBanner(
      bannerColor: FluentBannerColor.accent,
      text: "It's me Mario",
    );

Adding Fluent Banner

FluentButton(
  title: "Open Banner",
  onPressed: () async {
    FluentScaffoldMessenger.of(context).addBanner(myBanner);
  },
)

Removing Fluent Banner

 FluentButton(
  title: "Fechar Banner",
  onPressed: () async {
    FluentScaffoldMessenger.of(context).removeBanner(myBanner);
  },
)

Fluent Toast

FluentToast has 4 variants of FluentToastColor:

Accent
Neutral
Danger
Warning

FluentButton(
  title: "Accent Toast",
  onPressed: (){
    FluentToast(
        toastColor: FluentToastColor.accent,
        text: "Fluent 2 is here",
        subText: "See what’s changed.",
        icon: Icon(FluentIcons.sparkle_20_filled),
        action: Builder(
          builder: (context) => IconButton(
            onPressed: () {
              FluentToastOverlayEntry.of(context).remove();
            },
            icon: Icon(Icons.cancel),
          ),
        )).show(
      context: context,
      duration: null,
      onDismissed: () {
        print("Fechou!");
      },
    );
  },
)

Fluent Text Field

Underlined 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.

FluentTextField(
  label: "Last Name",
  hintText: "Ballinger",
  onChanged: (value) {
  //   put your onChanged function here
  },
  obscureText: false,
  readOnly: false,
  suffixIcon: Icon(FluentIcons.leaf_three_16_filled),
  hasError: error != null,
  assistiveText: error ?? "assistive",
)

Visual states

The component renders the six states defined by the Fluent 2 iOS spec:

// Filled — has value, not focused
FluentTextField(
  label: "Label",
  controller: FluentTextFieldController()..textEditingController.text = "Input text",
  assistiveText: "Assistive text",
  prefixIcon: Icon(FluentIcons.search_24_regular),
)

// Placeholder — empty, not focused
FluentTextField(
  label: "Label",
  hintText: "Hint text",
  assistiveText: "Assistive text",
  prefixIcon: Icon(FluentIcons.search_24_regular),
)

// Focused — empty, focused (label and underline turn brand blue)
FluentTextField(
  label: "Label",
  hintText: "Hint text",
  assistiveText: "Assistive text",
  prefixIcon: Icon(FluentIcons.search_24_regular),
  autofocus: true,
)

// Typing — has value, focused (auto-shows trailing dismiss icon)
FluentTextField(
  label: "Label",
  controller: FluentTextFieldController()..textEditingController.text = "Input text",
  assistiveText: "Assistive text",
  prefixIcon: Icon(FluentIcons.search_24_regular),
)

// Error — label, underline, and assistive text turn red
FluentTextField(
  label: "Label",
  controller: FluentTextFieldController()..textEditingController.text = "Input text",
  hasError: true,
  assistiveText: "Password must contain 8 characters and include letters, numbers and symbols",
  prefixIcon: Icon(FluentIcons.search_24_regular),
)

// Disabled — hint text uses the disabled neutral foreground (#BDBDBD)
FluentTextField(
  label: "Label",
  hintText: "Hint text",
  assistiveText: "Assistive text",
  prefixIcon: Icon(FluentIcons.lock_closed_24_regular),
  enabled: false,
)

Additional capabilities

FluentTextField also exposes the underlying Flutter TextField surface for advanced use cases:

Multi-line input: maxLines, expands, scrollController.
Character counter: maxLength, buildCounter.
Password / obscured input: obscureText, obscuringCharacter.
Prefix variants: prefixIcon (icon column on the left) and prefix (inline widget inside the input).
Cursor customization: cursorErrorColor, cursorHeight, custom magnifier via magnifierConfiguration.
Input behavior: keyboardType, inputFormatters, autocorrect, enableSuggestions, autofocus, canRequestFocus, clipBehavior, textAlign.
Callbacks: onChanged, onTap, onEditingComplete, onSubmitted.

Fluent Progress Bar

if (isUpdating)
  FluentProgressBar(
    value: null,
  )

Fluent Heads-up Display

 FluentButton(
    title: "Open HUD",
    onPressed: () {
      FluentHeadsUpDisplayDialog(
        future: Future.delayed(Duration(seconds: 1)),
        confirmStopMessage: "Are you sure you want to close this?",
        hud: FluentHeadsUpDisplay(
          text: "Refreshing Data...",
        ),
      ).show(context);
    },
  )

📚 Additional information

This is mainly inspired on the Fluent2 iOS Figma UI Kit. It will be gradually adapted to Android as soon as the Microsoft release its Figma UI Kit.

References

💛 Acknowledgments

Special thanks to the two main developers behind this project, whose work shaped most of the components and patterns in fluent2_kit:

Leticya Sheyla — @LeticyaSheyla
Railson Ferreira — @railson-ferreira

Installing

Coexisting with fluent_ui

✨ Features

Getting started

First of all, let's wrap our MaterialApp with FluentProvider

The FluentScaffold

Theme

Fluent Icons

Design Tokens

CornerRadius

Spacing Ramp

Typography

Shadows

Stroke

Color Tokens

Neutral Colors

Brand colors

🧩 Components

Fluent Avatar

Types:

Behavior

Presence Badges

Activity Rings

Cutout

Fluent Button

Sizes

Variants

Leading icon

Disabled

Full width

Fluent FAB

Sizes

Variants

Fluent Navigation Bar

Leading

Gradient

Nav title

Nav actions

Fluent List

Fluent Card

Fluent Radio Button

Fluent Checkbox

Fluent Switch Toggle

Fluent Segmented Control

Types

Variants

Text items

Icon items (pill button, brand)

Fluent Banner

Fluent Toast

Fluent Text Field

Visual states

Additional capabilities

Fluent Progress Bar

Fluent Heads-up Display

📚 Additional information

References

💛 Acknowledgments

Libraries

fluent2_kit package

Coexisting with `fluent_ui`