Fluent 2 UI for Flutter

What is Fluent UI 2

Fluent 2 is the next evolution of Microsoft's design system Fluent UI. With a fluid and intuitive experience you can create beautiful, cohesive Microsoft experiences using Fluent 2.
‎ ‎
‎

Gbt Fluent 2 UI package

The Gbt Fluent 2 UI package is a Fluent2 design system based on Material. It emerged from the necessity to implement the entire Fluent design system within Flutter.

Material Design is an open-source design system built and supported by Google designers and developers.

This package is a library of customizable components that fit the Fluent 2 UI design standards. With Gbt Fluent 2 UI package you can configure your application according to theme tokens, colors, fonts and use design system components.‎ ‎

Run the following command to install the package:

flutter pub add gbt_fluent2_ui

‎

Consistent Theming

Maintain a consistent theming in your entire app.
First of all, you must wrap your MaterialApp with FluentProvider to make sure that every component will work well.

‎

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

You can pass you brand color, by default it is fluent brand color palette. Use getTheme function to set the theme in light and dark.

Suggestion: you can use Smart Swatch Generator to generate your color palette.

FluentProvider(
      child: Builder(
        builder: (context) {
          final MaterialColor brandColor = MaterialColor(0XFF8934e4, {
            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),
            900: Color(0XFF0e011d),
          });

          final appLightTheme =
              getTheme(brandColor: brandColor, brightness: Brightness.light);

          final appDarkTheme =
              getTheme(brandColor: brandColor, brightness: Brightness.dark);

          return MaterialApp(
            theme: appLightTheme,
            darkTheme: appDarkTheme,
          );
        },
      ),
    )

‎ ‎
Don't forget to use FluentScaffold instead Scaffold in your views:

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

‎

Design tokens

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

You can use design tokens from theme with FluentThemeDataModel.of(context).

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,
)

Color Tokens

Fluent brand colors are defined based on the color palette you placed in the theme:

color: FluentColors.of(context)?.brandBackground1Rest,

Or you can use neutral colors, that are used on surfaces, text, and layout elements:

• In Light Theme:

color: FluentColors.neutralForeground2Rest,

• In Dark Theme:

color: FluentDarkColors.neutralForeground2Rest,

Typography

Fluent uses the system's default font to ensure a familiar and accessible experience across platforms. For Android the Roboto font is used and for IOS the San Francisco Pro font is used.
The fluent type ramp defines the weight, size and line height of text elements, you can choose from theme with FluentThemeDataModel. If you wanna change some text style like color you can use fluentCopyWith function.

FluentText(
   "This is a caption 1",
   style: FluentThemeDataModel.of(context)
       .fluentTextTheme
       ?.caption1
       ?.fluentCopyWith(
           fluentColor: FluentColors.neutralForeground1Rest,
        ),
      )

Iconography

" This is a set of the Microsoft Fluent system icons used for products across Microsoft. The Fluent icons are friendly - including rounded corners, simplified shapes and come in 3 themes: Regular, Filled & Color."

Import FluentIcons and use different variations:

FluentIcon variants:

    FluentAvatar(
      child: FluentIcon.outlineIcon(
         FluentIcons.person_20_regular,
       ),
    ),

    FluentAvatar(
      child: FluentIcon.accentIcon(
         FluentIcons.person_20_regular,
       ),
    ),

    FluentAvatar(
      child: FluentIcon.outlinedPrimaryIcon(
         FluentIcons.person_20_regular,
      ),
    ),

    FluentIcon(FluentIcons.person_20_regular),

    FluentAvatar(
      child: FluentIcon.outlineIcon(
         FluentIcons.person_20_regular,
            colorScheme: Colors.deepOrange,
         ),
      ),

Shadow

To use Fluent set of shadows you must use the FluentContainer.

FluentContainer(
  shadow: FluentThemeDataModel.of(context).fluentShadowTheme?.shadow2,   
) 

‎ ‎

Stroke

To use Fluent stroke set of styles you must use FluentContainer or FluentStrokeDivider.

• Borders: You can define Fluent stroke tokens in FluentAvatar and FluentContainer:

FluentContainer(
   strokeStyle: FluentStrokeStyle(
       color: FluentColors.neutralStroke1Rest,
       thickness: FluentStrokeThickness.strokeWidth20,
       padding: 12,
   ),
)

• Divider: To create stroke lines you can use FluentStrokeDivider. You can get stroke tokens predefined from fluent from FluentThemeDataModel or you can define color, thickness, dashed properties and padding in FluentStrokeStyle():

FluentStrokeDivider(
  style: 
 FluentThemeDataModel.of(context).fluentStrokeTheme?.stroke2,
)

Size and spacing

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

To use Fluent spacing tokens and sizes you must use FluentSize values:

SizedBox(height: FluentSize.size120.value)

Icon(
 FluentIcons.info_24_regular,
 size: FluentSize.size240.value,
)

‎

Components

• FluentProvider: Don't forget to wrap you application with it.
  ‎

• FluentScaffold: It's important to use FluentScaffold instead Scaffold To make sure components will function correctly.
  ‎

• FluentAvatar: Shows an image or text to represent a person or group as well as gives additional information like their status and activity.
  ‎

• FluentNavBar: Provides information and actions related to the current screen.
  ‎

• FluentText
  ‎

• FluentContainer: Accepts all fluent values ​​helping and guiding you to use fluent styles.
  ‎

• FluentIcon
  ‎

• FluentActivityIndicator
  ‎

• FluentRefreshActivityIndicator
  ‎

• FluentBanner
  ‎

• FluentButton: Have customizable backgrounds, and can include a title or an icon. Has three variants outline, outlineAccent, accent and subtle, the default value is accent.
  ‎

• FluentCheckbox
  ‎

• FluentChip
  ‎

• FluentHeadsUpDisplay
  ‎

• FluentLeftNav: Left navigation drawers allow access to destinations and features like switching accounts, and can be controlled by either a navigation menu icon or an avatar.
  ‎

• FluentList: FluentList has two variations of list: One-line and Multi-line.
  ‎

• FluentListItemOneLine
  ‎

• FluentListItemMultiLine
  ‎

• FluentPopover
  ‎

• FluentProgressBar
  ‎

• FluentSearchBar
  ‎

• FluentSheet
  ‎

• FluentSwitchToggle
  ‎

• FluentTabBar
  ‎

• FluentTextField
  ‎

• FluentToast
  ‎

• FluentTooltip
  ‎

• FluentCard: FluentCard
  ‎

• FluentCardContainer: A flexible container with FluentCard styles that you can use for different components
  ‎

• FluentRadioButton
  ‎

• FluentStrokeDivider
  ‎