IO /flutter-bui…

Xuanhantan.medium.com/

Published: June 2, 2021-6 minutes to read

From Microsoft Design

Smooth Design is Microsoft’s solution for designing beautiful Windows programs. At Google I/O 2021, Flutter finally expanded its support for Windows UWP, which requires well-designed Windows applications. In this article, I will show you how to create a basic Fluent Design application with Flutter.

This guide works best for Win32 and UWP applications of Flutter. If you haven’t already set up your UWP Flutter app, follow my other guides to do so.

Adding required software packages

The first step is to install the FLUent_UI package for BDlukaa.

On the command line in your application’s folder, type the following command.

flutter pub add fluent_ui
Copy the code

Now, it’s time to start creating our Fluent Design application!

FluentApp

In main.dart, import the fluent_UI package.

import 'package:fluent_ui/fluent_ui.dart';
Copy the code

Then, create a FluentApp Widget in the Build function. This is the foundation of your Fluent application.

return FluentApp();
Copy the code

Your code should now look like this.

import 'package:fluent_ui/fluent_ui.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    returnMyAppState(); }}class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    returnFluentApp(); }}Copy the code

Like the MaterialApp, FluentApp has a theme property that accepts a ThemeData() that lets you customize the look and feel of your application. You can also use the darkTheme property to set a separate darkTheme.

Some of the key properties of ThemeData() are accentColor, which is the color of the highlighted elements, and scaffoldBackgroundColor, which is the background color of your application. Of course, there are many other properties, such as iconTheme, buttonTheme, and contentDialogTheme, that allow you to customize the look of ICONS, buttons, and dialogs, respectively.

Here is an example of using themes in FluentApp.

return FluentApp(
      theme: ThemeData(
          scaffoldBackgroundColor: Colors.white,
          accentColor: Colors.blue,
          iconTheme: const IconThemeData(size: 24)),
      darkTheme: ThemeData(
          scaffoldBackgroundColor: Colors.black,
          accentColor: Colors.blue,
          iconTheme: const IconThemeData(size: 24)));Copy the code

The navigation view

A NavigationView controls movement between Fluent Design pages. Add a NavigationView to the Fluent App’s home property like this.

return FluentApp(
        theme: ThemeData(
            scaffoldBackgroundColor: Colors.white,
            accentColor: Colors.blue,
            iconTheme: const IconThemeData(size: 24)),
        darkTheme: ThemeData(
            scaffoldBackgroundColor: Colors.black,
            accentColor: Colors.blue,
            iconTheme: const IconThemeData(size: 24)),
        home: NavigationView()
);
Copy the code

The application bar is common in many Windows applications and can be implemented in NavigationView through the NavigationAppBar property.

        home: NavigationView(
          appBar: NavigationAppBar(
                 title: Text("Fluent Design App Bar")))Copy the code

An app bar is visible at the top of Microsoft Store apps

The navigation pane

Next, a NavigationPane can be added to the NavigationView to navigate between pages. There are five different displayMode (styles) available.

  1. To open. The pane is expanded and placed to the left of the content. There must be an icon for each category or page.

Source: Microsoft Design – Controls and Patterns

  1. Compact. The pane is placed to the left of the content and shows only the icon until it is expanded.

Source: Microsoft Design – Controls and patterns

  1. A minimum. Only menu buttons are displayed until the pane expands. When expanded, it is placed to the left of the content.

From then on. Microsoft Design — Controls and patterns

  1. Automatic: This mode dynamically chooses between minimization, compactness, and openness, depending on the width of the window.

Source: Microsoft Design – Controls and patterns

  1. Top: The pane is placed above the content. It is useful for categories or pages that cannot be represented by ICONS.

Source: Microsoft Design – Controls and patterns

To create a NavigationPane, we can use the Pane property of the NavigationView. And then, We can set the displayMode to PaneDisplayMode.auto, PaneDisplayMode.open, PaneDisplayMode.compact, PaneDisplayMode.minimal or PaneDisplay Mode. The top.

        home: NavigationView(
          appBar: NavigationAppBar(
            title: Text("Fluent Design App Bar")),
          pane: NavigationPane(
            displayMode: PaneDisplayMode.auto, 
          ),
      )
Copy the code

Next, we need to specify the items in our NavigationPane. We can set the Items property to a list of PaneItems. Each PaneItem accepts an icon and a title. Here is my example.

          pane: NavigationPane(
            displayMode: PaneDisplayMode.auto,
            items: [
              PaneItem(
                icon: Icon(Icons.code),
                title: Text("Sample Page 1")
              ),
              PaneItem(
                icon: Icon(Icons.desktop_windows_outlined),
                title: Text("Sample Page 2"))),Copy the code

I do NavigatorPane. It has two PaneItem widgets.

Now create a variable of type int named index in your MyAppState class. This is responsible for managing the pages selected from the NavigationPane.

class MyAppState extends State<MyApp> {
  int index = 0;
Copy the code

We now use the linked index as the selected index for the navigation pane. Set the Selected property of the NavigationPane to Index.

pane: NavigationPane(
            selected: index,
...
Copy the code

To update the index variable when the selected PaneItem is changed, we need to specify the onChanged attribute.

pane: NavigationPane( selected: index, onChanged: (newIndex){ setState(() { index = newIndex; }); },...Copy the code

Optional. To add the Acrylic transparency effect to the NavigationPane, we can set the useAcrylic property to true in the NavigationView.

home: NavigationView(
          appBar: NavigationAppBar(
            title: Text("Fluent Design App Bar")),
          useAcrylic: true.Copy the code

The navigation body

NavigationBody is used for page transitions in navigation views, which are performed as they switch between pages.

We can set NavigationBody to the content property of the navigation view.

home: NavigationView(
          content: NavigationBody(),
...
Copy the code

Next, we will need to specify the Index attribute as the selected index of the NavigationPane. We can set it as our index variable.

home: NavigationView(
          content: NavigationBody(
            index: index
          ),
...
Copy the code

After that, we’ll need to specify the children property as a list of widgets to display for each PaneItem. Note: The order of the widgets in the Children property must be the same as the order of the PaneItem widgets.

Typically, these components are ScaffoldPage components. Here is an example of my children property.

content: NavigationBody(
            index: index,
            children: [
              ScaffoldPage(),
              ScaffoldPage(),
            ],
          ),
Copy the code

Scaffolding page

ScaffoldPage is equivalent to Fluent Design of Material Scaffold.

The header property specifies the top bar.

ScaffoldPage(
      header: Text(
        "Sample Page 1",
        style: TextStyle(fontSize: 60),),),Copy the code

You can see the title text “My Music” in the Grove Music application.

The content property specifies the other widgets on ScaffoldPage, similar to the Body property in A Material Scaffold.

ScaffoldPage(
      header: Text(
        "Sample Page 1",
        style: TextStyle(fontSize: 60),
      ),
      content: Center(
        child: Text("Welcome to Page 1!"),),);Copy the code

Here’s what my application looks like so far.

Navigator.push & Navigator.pop

FluentApp supports the same navigation functionality as MaterialApp, as we all like. However, when navigating between pages in FluentApp, we use FluentPageRoute instead of MaterialPageRoute.

Navigator.push(context, FluentPageRoute(builder: (context) => Page2()));
Copy the code

conclusion

That’s it for this article. I hope you can now create a basic Fluent Design application with Flutter. If you find this article useful, clap your hands!

In the next article, I’ll show you how we make buttons, check boxes, and text boxes for a smooth user interface. See you then!

Translation via www.DeepL.com/Translator (free version)