Fluent 2 for Flutter

fluent_2

Microsoft Fluent 2 for Flutter — web & desktop.
90+ components, 20 chart types, 4 themes, 135 locales.
Built on package:flutter/widgets.dart. Zero Material. Zero Cupertino.

pub version live showroom CI no material MIT

▶ Open the live showroom  ·  Components  ·  Charts  ·  Theme

Install

dependencies:
  fluent_2: ^0.0.1

import 'package:fluent_2/fluent_2.dart';

void main() => runApp(
  FluentApp(
    theme: FluentThemeData.light(),
    darkTheme: FluentThemeData.dark(),
    themeMode: FluentThemeMode.system,
    home: const Home(),
  ),
);

One import gets you components and tokens — fluent_2 re-exports fluent_2_core.

Showcase

Every image below is a real render of the widgets in this package, captured from the showroom in both themes. Nothing here is a mockup.

Buttons

Light Dark
Buttons light Buttons dark

Text inputs

Light Dark
Inputs light Inputs dark

Selection controls

Light Dark
Selection light Selection dark

Surfaces & people

Light Dark
Surfaces light Surfaces dark
Light Dark
Navigation light Navigation dark
Light Dark
Menu light Menu dark

Data grid

Light Dark
Data grid light Data grid dark

Calendar

Light Dark
Calendar light Calendar dark

Status & progress

Light Dark
Feedback light Feedback dark

Charts

A full port of the Fluent UI React charting library — axes, legends, callouts, annotations, and a declarative (Plotly-schema) entry point included.

Light Dark
Charts light Charts dark
Bar charts light Bar charts dark

What's in the box
Buttons Button · CompoundButton · MenuButton · SplitButton · ToggleButton
Inputs Input · Textarea · SearchBox · SpinButton · Dropdown · Dropdown options · Slider · Switch · Checkbox · Radio + RadioGroup · Rating · SwatchPicker · ColorPicker (ColorArea · ColorSlider · AlphaSlider) · TagPicker · Field · Label · InfoLabel · InfoButton · Link
Date & time Calendar · DatePicker · TimePicker
Surfaces Card (header/footer/preview) · Accordion · Acrylic · Avatar · AvatarGroup · Badge · CounterBadge · PresenceBadge · Persona · Carousel · Divider · ProgressBar · Skeleton · Spinner · StatusIndicator · Tag · InteractionTag · Tooltip · MessageBar
Navigation Nav · NavDrawer · TabList · Breadcrumb · Tree · Toolbar · ListItem · DataGrid · Hamburger
Overlays Dialog · Drawer · Menu · MenuItem · Popover · TeachingPopover · Toast + Toaster
Charts Area · Line · VerticalBar · GroupedVerticalBar · VerticalStackedBar · HorizontalBar · HorizontalBarWithAxis · Donut · Funnel · Gauge · Gantt · HeatMap · Polar · Sankey · Scatter · Sparkline · ChartTable · Declarative (Plotly schema) · Vega declarative · Annotation layers

Every component ships a companion *Style class, so a widget can be restyled without a fork and without a copyWith chain.

Theming

Four ready themes, and brand ramps generated from a single key colour — a Dart port of Microsoft's Theme Designer algorithm (two quadratic béziers through CIE Lab, sampled against a per-hue lightness table, chroma-snapped into sRGB).

FluentThemeData.light();        FluentThemeData.dark();
FluentThemeData.teamsDark();    // own token table, not dark + Teams ramp
FluentThemeData.highContrast(); // 8 Windows system colours, no brand ramp

FluentThemeData.light(
  brand: FluentBrandRamp.fromKeyColor(
    const Color(0xFF7B2D8E),
    vibrancy: 0.5,   // both bézier control points
    hueTorsion: 0.2, // rotate through neighbouring hues (-0.5…0.5)
  ),
);

Verbatim upstream ramps are there too, for fidelity to Microsoft's shipped themes: FluentBrandRamp.web, .teams, .teamsV21, .office, .communicationBlue.

Tokens, not magic numbers:

final theme = FluentTheme.of(context);
theme.colors.brandBackground;           // alias token
theme.typography.subtitle1;             // type ramp
theme.shadow(FluentElevation.shadow8);  // two-layer elevation
FluentSpacing.l;                        // 16
FluentRadius.medium;                    // 4
FluentDuration.normal;                  // 200ms
FluentCurve.decelerateMid;              // entrance easing

Accessibility, i18n, RTL

  • Keyboard first. Every interactive component has a focus path (FocusableActionDetector) and a visible focus indicator.
  • Screen readers. Semantics labels on every control, including per-chart descriptions and data tables behind each visualisation.
  • High contrast. A first-class theme, covered by its own golden images — not an afterthought.
  • 135 locales, 32 languages, generated from ARB and checked in, so the published package needs no build step.
  • RTL is a layout mode, not a mirror hack: Arabic, Hebrew, Persian and Urdu are part of the test matrix.
FluentApp(
  supportedLocales: FluentLocalizations.supportedLocales,
  localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
    FluentLocalizations.delegate,
  ],
);

How the fidelity is proven

Question Answered by
Does it match the Figma spec? Numeric fixtures — resolved sizes, paddings, radii, strokes and ARGB fills compared to values extracted from the Fluent 2 Figma file.
Did it change since last commit? 264 golden images: one per component per theme, light / dark / high contrast.
Does it match Fluent UI React v9? Story-for-story parity with the React Storybook — 90 documented pages, rebuilt as the showroom you can open above.
Is Material creeping back in? melos run no-material fails the build on any material.dart or cupertino.dart import.

Example

The example/ directory is the showroom itself — a hand-written clone of the Fluent UI React v9 Storybook, deployed on every push to main:

b1digital.github.io/fluent_ui_2_flutter/

cd example
flutter run -d chrome
Package Purpose
fluent_2_core Tokens, theming, FluentApp — shared foundation, re-exported here.
fluent_2_fonts Platform font facade; open-source Selawik on Web and Windows.

License

MIT © ICITECH Teknoloji A.Ş. Fluent 2 is a design system by Microsoft; this is an independent Flutter implementation and is not affiliated with or endorsed by Microsoft.

Libraries

fluent_2
Fluent 2 components for web and desktop surfaces.