Unofficial implementation of Fluent UI for Flutter. It's written based on the official documentation
- Motivation
- Style
- TODO Accessibility
- Navigation
- Widgets
- Button
- Split Button
- Toggle Button
- TODO Dropdown Button
- Checkbox
- Toggle Switches
- Radio Buttons
- Slider
- TextBox
- TODO Auto Suggest Box
- TODO Combo Box
- Tooltip
- Content Dialog
- TODO Flyout
- TODO Teaching tip
- Acrylic
- InfoBar
- TODO Calendar View
- TODO Calendar Date Picker
- TODO Date Picker
- TODO Time Picker
- TODO Progress Ring
- TODO Progress Bar
- TODO Pull-to-Refresh
- TODO Tree View
- Equivalents with the material library
- Contribution
Since flutter has Windows support (currently in stable under an early release flag as of 11/03/2021), it's necessary to have support to its UI guidelines to build apps with fidelity, since it has support for Material and Cupertino. See this for more info on the offical fluent ui support
See also:
Currently, we've only done the desktop part of the library, so you can import the library as one itself:
import 'package:fluent_ui/fluent_ui';
Note: this does not mean you can't use this library anywhere else. You can use it wherever you want
Futurely, once the desktop part of this library gets mature, web and mobile will also be supported. See also:
Also, futurely there will be a way to get the current device accent color. For more info, see accent color
You can use the Theme
widget to, well... theme your widgets. You can style your widgets in two ways:
- Using the
FluentApp
widget
FluentApp(
title: 'MyApp',
style: Style(
...
),
)
- Using the
Theme
widget
Theme(
style: Style(
...
),
child: ...,
),
Inside your app, you use icons to represent an action, such as copying text or navigating to the settings page. This library includes an icon library with it, so you can just call Icons.[icon_name]
in any Icon
widget:
Icon(Icons.add)
To style icons, you can use IconStyle
in the app Style
or use the property style
in the Icon
widget. You can see the list of icons here
This library also includes the Fluent UI colors with it, so you can just call Colors.[color_name]
:
TextStyle(color: Colors.black)
Avaiable colors:
Colors.transparent
Colors.white
Colors.black
Colors.grey
Colors.yellow
Colors.orange
Colors.red
Colors.magenta
Colors.purple
Colors.blue
Colors.teal
Colors.green
Common controls use an accent color to convey state information. By default, the accent color is Colors.blue
. However, you can also customize your app's accent color to reflect your brand:
Style(
accentColor: Colors.blue,
)
You can change the style brightness to change the color of your app.
It defaults to the brightness of the device. (MediaQuery.of(context).brightness
)
To set a typography, you can use the Style
class combined with the Typography
class:
Style(
typography: Typography(
caption: TextStyle(
fontSize: 12,
color: Colors.black,
fontWeight: FontWeight.normal,
),
),
)
You should use one font throughout your app's UI, and we recommend sticking with the default font for Windows apps, Segoe UI. It's designed to maintain optimal legibility across sizes and pixel densities and offers a clean, light, and open aesthetic that complements the content of the system.
The Windows type ramp establishes crucial relationships between the type styles on a page, helping users read content easily.
The default flutter navigation is available when using the FluentApp
widget, that means you can simply call Navigator.push
and Navigator.pop
to navigate between routes. See navigate to a new screen and back
Navigation Panel will be rewritten in a near future. See #3 for more info
int _currentIndex = 0;
Scaffold(
left: NavigationPanel(
currentIndex: _currentIndex,
menu: NavigationPanelMenuItem(...),
items: [
NavigationPanelSectionHeader(
header: Text('Cool Navigation Panel Header'),
),
NavigationPanelItem(
icon: Icon(Icons.checkbox_checked),
label: Text('Page 1'),
onTapped: () => setState(() => _currentIndex = 0),
),
NavigationPanelTileSeparator(),
NavigationPanelItem(
icon: Icon(Icons.text_align_center_filled),
label: Text('Page 2'),
onTapped: () => setState(() => _currentIndex = 1),
),
],
),
body: ...,
)
Usually used in Scaffold's body
property. Example:
int _currentIndex = 0;
Scaffold(
left: NavigationPanel(...),
body: NavigationPanelBody(
index: _currentIndex,
transitionBuilder: (child, animation) {
// Refer to page transitions to see more page transitions
return DrillInPageTransition(
child: child,
animation: animation,
);
}
children: [
Page1(),
Page2(),
],
),
),
Page transitions navigate users between pages in an app, providing feedback as the relationship between pages. Page transitions help users understand if they are at the top of a navigation hierarchy, moving between sibling pages, or navigating deeper into the page hierarchy.
This library gives you the following implementations to navigate between your pages:
Entrance is a combination of a slide up animation and a fade in animation for the incoming content. Use entrance when the user is taken to the top of a navigational stack, such as navigating between tabs or left-nav items.
The desired feeling is that the user has started over.
Avaiable with the widget EntrancePageTransition
, it produces the following effect:
Use drill when users navigate deeper into an app, such as displaying more information after selecting an item.
The desired feeling is that the user has gone deeper into the app.
Avaiable with the widget DrillInPageTransition
, it produces the following effect:
It's avaiable with the widget HorizontalSlidePageTransition
.
It's recommended to widely use these transitions when using the navigation panel.
The TabView control is a way to display a set of tabs and their respective content. TabViews are useful for displaying several pages (or documents) of content while giving a user the capability to rearrange, open, or close new tabs. Learn more
SizedBox(
height: 600,
child: TabView(
currentIndex: currentIndex,
onChanged: (index) => setState(() => currentIndex = index),
onNewPressed: () {
setState(() => tabs++);
},
tabs: List.generate(tabs, (index) {
return Tab(
text: Text('Tab $index'),
closeIcon: Tooltip(
message: 'Close tab',
child: IconButton(
icon: Icon(Icons.pane_close),
onPressed: () {
setState(() => tabs--);
if (currentIndex > tabs - 1) currentIndex--;
},
),
),
);
}),
bodies: List.generate(
tabs,
(index) => Container(
color: index.isEven ? Colors.red : Colors.yellow,
),
),
),
),
The code above produces the following:
A button gives the user a way to trigger an immediate action. Learn more
Button(
text: Text('Cool button'),
onPressed: () {
print('button pressed'),
}
)
To disable the button, set onPressed
to null
A Split Button has two parts that can be invoked separately. One part behaves like a standard button and invokes an immediate action. The other part invokes a flyout that contains additional options that the user can choose from. Learn more
You can use a SplitButtonBar
to create a Split Button. It usually takes Button
s in the buttons
property. You can also customize the button spacing by changing the property interval
in its style.
const double splitButtonHeight = 50.0;
SplitButtonBar(
style: SplitButtonStyle(
interval: 1, // the default value is one
),
// There need to be at least 2 items in the buttons, and they must be non-null
buttons: [
SizedBox(
height: splitButtonHeight,
child: Button(
text: Container(
height: 24,
width: 24,
color: context.theme!.accentColor,
),
onPressed: () {},
),
),
SizedBox(
height: splitButtonHeight,
child: Button(
text: Icon(Icons.chevron_down),
onPressed: () {
// TODO: open the color list here
},
style: ButtonStyle(padding: EdgeInsets.all(6)),
)
)
],
)
The code above produces the following button:
A button that can be on or off.
ToggleButton(
)
A check box is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has three selection states: unselected, selected, and indeterminate. Use the indeterminate state when a collection of sub-choices have both unselected and selected states. Learn more
To create a checkbox, use the widget Checkbox
:
bool _checked = true;
Checkbox(
checked: _checked,
onChanged: (value) => setState(() => _checked = value),
)
State | Property | Value |
---|---|---|
checked | checked | true |
unchecked | checked | false |
indeterminate | checked | null |
enabled | onChanged | non-null |
disabled | onChanged | null |
The toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Use toggle switch controls to present users with two mutually exclusive options (such as on/off), where choosing an option provides immediate results.
bool _checked = false;
ToggleSwitch(
checked: _checked,
onChanged: (v) => setState(() => _checked = v),
)
Toggle Switch | Checkbox |
---|---|
Use a toggle switch for binary settings when changes become effective immediately after the user changes them. | Use check boxes for optional ("nice to have") items. |
Use a checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "submit" or "next" button to apply changes, use a check box. | |
Use check boxes when the user can select multiple items that are related to a single setting or feature. |
Radio buttons, also called option buttons, let users select one option from a collection of two or more mutually exclusive, but related, options. Radio buttons are always used in groups, and each option is represented by one radio button in the group.
In the default state, no radio button in a RadioButtons group is selected. That is, all radio buttons are cleared. However, once a user has selected a radio button, the user can't deselect the button to restore the group to its initial cleared state.
The singular behavior of a RadioButtons group distinguishes it from check boxes, which support multi-selection and deselection, or clearing.
int _currentIndex = -1;
final radioButtons = [
'RadioButton 1',
'RadioButton 2',
'RadioButton 3',
];
Column(
children: List.generate(radioButtons.length, (index) {
return Row(children: [
RadioButton(
selected: _currentIndex == index,
// set onChanged to null to disable the button
onChanged: () => setState(() => _currentIndex = index),
),
SizedBox(width: 4),
Text(radioButtons[index])
]);
}),
),
The code above produces the following:
A slider is a control that lets the user select from a range of values by moving a thumb control along a track. Learn more
Vertical slider is not available yet
double _value = 0;
Container(
// The default width is 200.
// The slider does not have its own widget, so you have to add it yourself.
// The slider always try to be as big as possible
width: 200,
child: Slider(
max: 100,
value: _value,
onChanged: (v) => setState(() => value = v),
// Label is the text displayed above the slider when the user is interacting with it.
label: '${sliderValue.toInt()}',
),
)
The code above produces the following:
The property
starSpacing
is missing
The rating control allows users to view and set ratings that reflect degrees of satisfaction with content and services. Learn more
double rating = 0.0;
RatingBar(
rating: rating,
onChanged: (v) => setState(() => rating = v),
)
You can set amount
to change the amount of stars. The rating
must be less than the stars and more than 0. You can also change the icon
, its size and color. You can make the bar read only by setting onChanged
to null
.
The TextBox control lets a user type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform, plaintext format. Learn more
You can use the forms screen in the example app for reference.
You can use the widget TextBox
to create text boxes:
TextBox(
controller: ...,
header: 'Notes',
placeholder: 'Type your notes here',
),
A tooltip is a short description that is linked to another control or object. Tooltips help users understand unfamiliar objects that aren't described directly in the UI. They display automatically when the user moves focus to, presses and holds, or hovers the mouse pointer over a control. The tooltip disappears after a few seconds, or when the user moves the finger, pointer or keyboard/gamepad focus. Learn more
To add a tooltip to a widget, wrap it in a Tooltip
widget:
Tooltip(
message: 'Tooltip message hehe',
child: Button(
text: Text('Button with tooltip'),
onPressed: () {
print('pressed button with tooltip');
}
),
)
It's located above or below the child
widget. You can specify the preffered location when both locations are available using the preferBelow
property.
Dialogs are modal UI overlays that provide contextual app information. They block interactions with the app window until being explicitly dismissed. They often request some kind of action from the user. Learn more
You can create a Dialog with the widget ContentDialog
:
ContentDialog(
title: Text('No WiFi connection'),
content: Text('Check your connection and try again'),
actions: [
Button(
text: Text('Ok'),
onPressed: () {
Navigator.pop(context);
}
)
],
),
You can display the dialog as an overlay by calling the function showDialog
:
showDialog(
context: context,
builder: (context) {
return ContentDialog(...);
},
);
Acrylic is a type of Brush that creates a translucent texture. You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy.
You can easily use the Acrylic
widget as a substitute for the Container
, because it has all the necessary properties it has, but don't use it everywhere everytime:
Do | Don't |
---|---|
Do use acrylic as the background material of non-primary app surfaces like navigation panes. | Don't put desktop acrylic on large background surfaces of your app - this breaks the mental model of acrylic being used primarily for transient surfaces. |
Do extend acrylic to at least one edge of your app to provide a seamless experience by subtly blending with the app’s surroundings. | Don’t place in-app and background acrylics directly adjacent to avoid visual tension at the seams. |
Don't place multiple acrylic panes with the same tint and opacity next to each other because this results in an undesirable visible seam. | |
Don’t place accent-colored text over acrylic surfaces. |
Acrylic(
padding: EdgeInsets.all(12), // Defaults to EdgeInsets.zero
child: Button(
text: Text('Mom it\'s me hehe <3'),
onPressed: () {
print('button inside acrylic pressed');
}
),
color: ...,
width: ...,
height: ...,
),
Currently, the following widgets use acrylic in its implementation:
This widget MAY BE unperformatic on VERY OLD devices because it uses expensive widgets in its composition:
ClipRect
andBackdropFilter
. It should not affect the most part of the devices
The InfoBar
widget is for displaying app-wide status messages to users that are highly visible yet non-intrusive. There are built-in Severity levels to easily indicate the type of message shown as well as the option to include your own call to action or hyperlink button. Since the InfoBar is inline with other UI content the option is there for the control to always be visible or dismissed by the user.
You can easility create it using the InfoBar
widget and theme it using InfoBarStyle
. It has built-in support for both light and dark theme:
InfoBar(
title: Text('Update available'),
content: Text('Restart the app to apply the latest update.'), // optional
severity: InfoBarSeverity.info, // optional. Default to InfoBarSeverity.info
),
The list of equivalents between this library and flutter/material.dart
Material | Fluent |
---|---|
TextButton | Button |
IconButton | IconButton |
Checkbox | Checkbox |
RadioButton | RadioButton |
- | RatingBar |
- | SplitButton |
- | ToggleButton |
Switch | ToggleSwitch |
TextField | TextBox |
AlertDialog | ContentDialog |
MaterialBanner | InfoBar |
Tooltip | Tooltip |
Drawer | NavigationPanel |
Divider | Divider |
VerticalDivider | Divider |
Card | Acrylic |
Feel free to open an issue if you find an error or make pull requests.
All the widgets above with the mark of (3) will not be implemented soon, so you can create a pull request with the implementation for them :). You can also help to improve the documentation for all the widgets, and in this readme.
All type of contributions are welcome :)