fluent_ui
Design beautiful native windows apps using Flutter
Design beautiful native windows apps using Flutter
## Installation
Add the package to your dependencies:
```yaml
dependencies:
fluent_ui: ^3.10.0
```
OR:
```yaml
dependencies:
fluent_ui:
git: https://github.com/bdlukaa/fluent_ui.git
```
You can see the example app [here](https://bdlukaa.github.io/fluent_ui//)
Finally, run `dart pub get` to download the package.
Projects using this library should use the stable channel of Flutter
### Badge
Are you using this library on your app? You can use a badge to tell others:
Add the following code to your `README.md` or to your website:
```html
```
---
# Style
[Learn more about Fluent Style](https://docs.microsoft.com/en-us/windows/uwp/design/style/)
You can use the `FluentTheme` widget to, well... theme your widgets. You can style your widgets in two ways:
1. Using the `FluentApp` widget
```dart
FluentApp(
title: 'MyApp',
theme: ThemeData(
...
),
)
```
2. Using the `FluentTheme` widget
```dart
FluentTheme(
theme: ThemeData(
...
),
child: ...,
),
```
## Icons
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 `FluentIcons.[icon_name]` in any `Icon` widget:
```dart
Icon(FluentIcons.add),
```
For a complete reference of current icons, please check the [online demo](https://bdlukaa.github.io/fluent_ui/) and click on "Icons".
The online demo has a search box and also supports clipboard copy in order to find every icon as fast as possible.
## Colors
This library also includes the Fluent UI colors with it, so you can just call `Colors.[color_name]`:
```dart
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`
### Accent color
Common controls use an accent color to convey state information. [Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/style/color#accent-color).
By default, the accent color is `Colors.blue`. However, you can also customize your app's accent color to reflect your brand:
```dart
ThemeData(
accentColor: Colors.blue,
)
```
To use the system's accent color, you can use the plugin [system_theme](https://pub.dev/packages/system_theme) made by me :). It has support for (as of 04/01/2021) Android, Web and Windows.
```dart
import 'package:system_theme/system_theme.dart';
ThemeData(
accentColor: SystemTheme.accentInstance.accent.toAccentColor(),
)
```
## Brightness
You can change the theme brightness to change the color of your app to
1. `Brightness.light`
2. `Brightness.dark`
It defaults to the brightness of the device. (`MediaQuery.of(context).platformBrightness`)
```dart
ThemeData(
brightness: Brightness.light, // or Brightness.dark
),
```
## Visual Density
Density, in the context of a UI, is the vertical and horizontal "compactness" of the components in the UI. It is unitless, since it means different things to different UI components.
The default for visual densities is zero for both vertical and horizontal densities. It does not affect text sizes, icon sizes, or padding values.
For example, for buttons, it affects the spacing around the child of the button. For lists, it affects the distance between baselines of entries in the list. For chips, it only affects the vertical size, not the horizontal size.
```dart
ThemeData(
visualDensity: VisualDensity.adaptivePlatformDensity,
),
```
The following widgets make use of visual density:
- Chip
- PillButtonBar
- Snackbar
## Typography
To set a typography, you can use the `ThemeData` class combined with the `Typography` class:
```dart
ThemeData(
typography: Typography(
caption: TextStyle(
fontSize: 12,
color: Colors.black,
fontWeight: FontWeight.normal,
),
),
)
```
### Font
You should use one font throughout your app's UI, and we recommend sticking with the default font for Windows apps, **Segoe UI Variable**. 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. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/style/typography#font)
### Type ramp
The Windows type ramp establishes crucial relationships between the type styles on a page, helping users read content easily. All sizes are in effective pixels. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/style/typography#type-ramp)
## Reveal Focus
Reveal Focus is a lighting effect for [10-foot experiences](https://docs.microsoft.com/en-us/windows/uwp/design/devices/designing-for-tv), such as Xbox One and television screens. It animates the border of focusable elements, such as buttons, when the user moves gamepad or keyboard focus to them. It's turned off by default, but it's simple to enable. [Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus)
Reveal Focus calls attention to focused elements by adding an animated glow around the element's border:
This is especially helpful in 10-foot scenarios where the user might not be paying full attention to the entire TV screen.
### Enabling it
Reveal Focus is off by default. To enable it, change the `focusTheme` in your app `ThemeData`:
```dart
theme: ThemeData(
focusTheme: FocusThemeData(
glowFactor: 4.0,
),
),
```
To enable it in a 10 foot screen, use the method `is10footScreen`:
```dart
import 'dart:ui' as ui;
theme: ThemeData(
focusTheme: FocusThemeData(
glowFactor: is10footScreen(ui.window.physicalSize.width) ? 2.0 : 0.0,
),
),
```
Go to the [example](/example) project to a full example
### Why isn't Reveal Focus on by default?
As you can see, it's fairly easy to turn on Reveal Focus when the app detects it's running on 10 foot screen. So, why doesn't the system just turn it on for you? Because Reveal Focus increases the size of the focus visual, which might cause issues with your UI layout. In some cases, you'll want to customize the Reveal Focus effect to optimize it for your app.
### Customizing Reveal Focus
You can customize the focus border, border radius and glow color:
```dart
focusTheme: FocusStyle(
borderRadius: BorderRadius.zero,
glowColor: theme.accentColor?.withOpacity(0.2),
glowFactor: 0.0,
border: BorderSide(
width: 2.0,
color: theme.inactiveColor ?? Colors.transparent,
),
),
```
To customize it to a single widget, wrap the widget in a `FocusTheme` widget, and change the options you want:
```dart
FocusTheme(
data: FocusThemeData(...),
child: Button(
text: Text('Custom Focus Button'),
onPressed: () {},
)
),
```
# Motion
This package widely uses animation in the widgets. The animation duration and curve can be defined on the app theme.
## Page transitions
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.
It's recommended to widely use page transitions on `NavigationView`, that can be implemented using the widget `NavigationBody`.
This library gives you the following implementations to navigate between your pages:
#### Entrance
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:
#### Drill In
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:
#### Horizontal
It's avaiable with the widget `HorizontalSlidePageTransition`.
# Navigation
The default Flutter Navigation is available on 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](https://flutter.dev/docs/cookbook/navigation/navigation-basics)
## Navigation View
The NavigationView control provides top-level navigation for your app. It adapts to a variety of screen sizes and supports both _top_ and _left_ navigation styles.
### App Bar
The app bar is the top app bar that every desktop nowadays have.
```dart
NavigationView(
appBar: NavigationAppBar(
title: Text('Nice App Title :)'),
actions: Row(children: [
/// These actions are usually the minimize, maximize and close window
]),
/// If automaticallyImplyLeading is true, a 'back button' will be added to
/// app bar. This property can be overritten by [leading]
automaticallyImplyLeading: true,
),
...
)
```
### Navigation Pane
The pane is the pane that can be displayed at the left or at the top.
```dart
NavigationView(
...,
pane: NavigationPane(
/// The current selected index
selected: index,
/// Called whenever the current index changes
onChanged: (i) => setState(() => index = i),
displayMode: PaneDisplayMode.auto,
),
...
)
```
You can change the `displayMode` to make it fit the screen.
| Name | Screenshot | Info |
| ------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Top |  | The pane is positioned above the content. We recommend top navigation when: