Working with Fluent UI to create native like Windows App

With Flutter 2.10, you can now build Windows apps using Flutter. With a single code-base, you can build high-quality Windows apps that also run on mobile and web.

Like we had Cuppertino and Material App for developing IOS and Android style apps, in this article we will cover how can we create native windows like UI using package Fluent UI.

Installing Fluent UI Package

Add package to dependencies:

dependencies:
 fluent_ui: ^3.9.1

Import fluent_ui package in main.dart:

import ‘package:fluent_ui/fluent_ui.dart’;

Using FluentApp widget

Just like MaterialApp, FluentApp contains several properties like theme and some other properties too.

import 'package:fluent_ui/fluent_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  FluentApp(
    
    );
  }
}

NavigationView

The NavigationView widget provides top-level navigation for your app. It adapts to a variety of screen sizes and supports both top and left navigation styles. Add a NavigationView to the home property of the Fluent App like this:

return  FluentApp(
  home: NavigationView(),
);

The app bar is the top app bar that every desktop now a days have, it can be implemented using NavigationAppBar in the appBar property.

home: NavigationView(
  appBar: NavigationAppBar(
    title: Text("Windows App")
  ),
),

NavigationPane

A NavigationPane is a pane that can be added to NaviationView to navigate between pages. Using displayMode property you can make it fit to screen.

home: NavigationView(
  appBar: NavigationAppBar(
    title: Text("Windows App"),
   
  ),
  pane: NavigationPane(
    displayMode: PaneDisplayMode.auto,
  ),
),

We can set the items property to a list of PaneItems to add items in NavigationPane. Each PaneItem accepts an icon and a title.

home: NavigationView(
  appBar: NavigationAppBar(
    title: Text("Windows App"),

  ),
  pane: NavigationPane(
    displayMode: PaneDisplayMode.auto,
      items: [
        PaneItem(
            icon: Icon(FluentIcons.home),
            title: Text("Home")
        ),
        PaneItem(
            icon: Icon(FluentIcons.insert),
            title: Text("Insert")
        ),
        PaneItem(
            icon: Icon(FluentIcons.view),
            title: Text("View")
        )
      ]
  ),
),

TabView

TabView is used to display set of tabs, they are useful for displaying and switching between different pages. It has three required arguments currentIndex,tabs and bodies. currentIndex stores index of opened tab, tabs accepts list of tabs and bodies accepts list of items which are to be displayed on each tab. In below example you can see how to implement TabView:

TabView(
  currentIndex: index,
  onChanged: (ind)=>setState(()=> index=ind),
  tabs: [
    Tab(text: Text("Tab 1")),
    Tab(text: Text("Tab 2"))
  ],
  bodies: [
    Container(
    color: Colors.blue,
  ),
  Container(
      color: Colors.red,
    )
  ],

),

Tooltip

Tooltips provides short description of child when mouse is hovered over it. To add a tooltip to a widget, wrap it with Tooltip widget:

Tooltip(
  message: 'Click here',
  child: Button(
      child: Text('Button'),
      onPressed: () {
      }
  ),
),

Content Dialog

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 or display warning. Content Dialog can be implemented using ContentDialog widget:

ContentDialog(
 title: Text(‘No WiFi connection’),
 content: Text(‘Check your connection and try again’),
 actions: [
 Button(
 child: Text(‘Ok’),
 onPressed: () {
 Navigator.pop(context);
 }
 )
 ],
),

Expander

Expander lets you show or hide less important while displaying primary content. Content within header is displayed as primary content. The user can expand and collapse the content area, where secondary content is displayed.

Expander(
  header: Text("This is primary content"),
  content: Text("This is secondary content"),
)

TreeView

TreeView enables a hierarchical list with expanding and collapsing nodes that contain nested items. It can be used to display multiple options and sub-options. In below example you can see how to implement TreeView:

TreeView(
  items: [
    TreeViewItem(content: Text("Ascending"),
    ),
    TreeViewItem(content: Text("Descending")),
    TreeViewItem(content: Text("Groupby"),
      children: [
        TreeViewItem(content: Text("Name")),
        TreeViewItem(content: Text("Date Modified")),
        TreeViewItem(content: Text("Type")),
      ]
    )

  ],
),

To learn more about Flutter and Fluent_UI package, refer to the mentioned links. With this I conclude this blog, I hope you got to learn something new today.

About me

I am Lalit Singh,an Undergraduate student at IIIT Allahabad and member of App Development wing at GeeHaven IIIT-Allahabad. Connect with me on LinkedIn.