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.
This package is a library of customizable components that fit the Fluent 2 UI design standards. With Gbt Fluent 2 UI package is possible to configure your application according to the theme tokens, colors and fonts predefined with the design system.
Material Design is an open-source design system built and supported by Google designers and developers.
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 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,
);
},
),
)
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:
- 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 radius tokens in
FluentAvatar
andFluentContainer
:
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, weight of stroke, dashed properties:
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
: Is 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 relating 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)