DEV Community

Cover image for Fluent 2 UI for Flutter
Leticya Sheyla
Leticya Sheyla

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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(...),
);
Enter fullscreen mode Exit fullscreen mode

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,
          );
        },
      ),
    )
Enter fullscreen mode Exit fullscreen mode


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

FluentScaffold(
  appBar: FluentNavBar(...),
  body: Placeholder(),
)
Enter fullscreen mode Exit fullscreen mode


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,
)
Enter fullscreen mode Exit fullscreen mode

Color Tokens

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

color: FluentColors.of(context)?.brandBackground1Rest,
Enter fullscreen mode Exit fullscreen mode

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

  • In Light Theme:
color: FluentColors.neutralForeground2Rest,
Enter fullscreen mode Exit fullscreen mode
  • In Dark Theme:
color: FluentDarkColors.neutralForeground2Rest,
Enter fullscreen mode Exit fullscreen mode

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,
        ),
      )
Enter fullscreen mode Exit fullscreen mode

Typography example in light theme

Typography example in dark theme

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 in dark mode

FluentIcon in light mode

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,
         ),
      ),
Enter fullscreen mode Exit fullscreen mode

Shadow

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

FluentContainer(
  shadow: FluentThemeDataModel.of(context).fluentShadowTheme?.shadow2,   
) 
Enter fullscreen mode Exit fullscreen mode


‎ ‎

Image description

Stroke

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

Image description

  • Borders: You can define Fluent stroke tokens in FluentAvatar and FluentContainer:
FluentContainer(
   strokeStyle: FluentStrokeStyle(
       color: FluentColors.neutralStroke1Rest,
       thickness: FluentStrokeThickness.strokeWidth20,
       padding: 12,
   ),
)
Enter fullscreen mode Exit fullscreen mode
  • 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,
)
Enter fullscreen mode Exit fullscreen mode

Size and spacing

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

Size and spacing example

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

SizedBox(height: FluentSize.size120.value)
Enter fullscreen mode Exit fullscreen mode
Icon(
 FluentIcons.info_24_regular,
 size: FluentSize.size240.value,
)
Enter fullscreen mode Exit fullscreen mode


Components

Components demonstration in light theme Components demonstration in dark theme
  • 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

Top comments (0)