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.

▶ 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

Text inputs #

Light	Dark

Selection controls #

Light	Dark

Surfaces & people #

Light	Dark

Navigation #

Light	Dark

Menus & toolbars #

Light	Dark

Data grid #

Light	Dark

Calendar #

Light	Dark

Status & progress #

Light	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

What's in the box #

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 #

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:

https://b1digital.github.io/fluent_ui_2_flutter/

cd example
flutter run -d chrome

Related packages #

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.