Flutter builds beautiful Windows applications-smooth design structure and navigation

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat flutter training group ducafecat

Brother Cat said

This is a set of interface solutions library for Windows UWP APP

Interface construction, menu navigation Tab form common control style extraction transition animation icon theme adaptive switching are available

If you use it, you can clone a set, maintain or research by yourself

https://github.com/bdlukaa/fluent_ui

original

https://itnext.io/flutter-building-beautiful-windows-apps-fluent-design-structure-and-navigation-e53a394988d2

Code

https://github.com/bdlukaa/fluent_ui

reference

https://pub.dev/packages/fluent_ui

text

Smooth design is Microsoft's solution for designing beautiful Windows programs. Flutter finally expanded its support for Windows UWP in Google i/o 2021, which requires well-designed Windows applications. In this article, I will show you how to use Flutter to create a basic Fluent design application.

This guide is best for Win32 and UWP Flutter applications. If you haven't set up your UWP Flutter app yet, follow my other guides to do so.

Add the required packages

The first step is to install the fluent_ui package by bdlukaa.

https://pub.dev/packages/fluent_ui

flutter pub add fluent_ui

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';

Then, create the FluentApp widget in the build function, which is the basis of the Fluent application.

return FluentApp();

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
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FluentApp();
  }
}

Similar to MaterialApp, FluentApp also has a theme property that accepts ThemeData() and allows you to customize the appearance of the application. You can also use the darkTheme property to set a separate dark theme.

Some of the key properties of ThemeData () are ecastcolor (the color of the highlighted element) and scaffoldBackgroundColor (the background color of the application). Of course, there are many other properties, such as iconTheme, buttonTheme and contentDialogTheme, which allow you to customize the appearance of icons, buttons, and dialog boxes, respectively.

The following 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)),
);

Navigation view

NavigationView controls movement between Fluent Design pages. Add a NavigationView to the home property of the Fluent App, as shown below:

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()
);

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

home: NavigationView(
          appBar: NavigationAppBar(
                 title: Text("Fluent Design App Bar")
          ),
      )

Navigation pane

Open: The pane is expanded and placed on the left side of the content. Every category or page must have an icon

Compression: The pane is placed on the left side of the content and only displays the icon until it is expanded.

Minimize: Before the pane is expanded, only the menu buttons are displayed. When expanded, it is placed on the left side of the content.

This mode dynamically chooses between Minimal, Compact and Open according to the width of the window.

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

To create a NavigationPane, you can use the pane property of NavigationView. Then, we can set the displayMode to PaneDisplayMode.auto, PaneDisplayMode.open, panedisplaymode.com pact, PaneDisplayMode.minimal or PaneDisplayMode.top.

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

Next, we need to specify the project in the 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")
              )
            ]
          ),

Now, create a variable index of type int in the MyAppState class. This will be responsible for managing the selected page in the NavigationPane.

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

Now, we will link the index to the selected index of the NavigationPane. Set the selected property of NavigationPane to index.

pane: NavigationPane(
            selected: index,
...

To update the index variable when the selected PaneItem changes, we need to specify the onChanged property.

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

Optional: To add Acrylic transparency effect to NavigationPane, you can set usecrylic attribute to true in NavigationView.

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

NavigationBody

NavigationBody is used to implement page transitions into navigation views and perform related transitions when switching between pages.

We can set NavigationBody as the content property of NavigationView.

home: NavigationView(
          content: NavigationBody(),
...

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

home: NavigationView(
          content: NavigationBody(
            index: index
          ),
...

Then, we need to specify the children attribute as a List containing the widgets to be displayed for each PaneItem. Note: The order of the widgets in the children attribute must be the same as the order of the PaneItem widgets.

Usually, these widgets are scaffolding page widgets:

content: NavigationBody(
            index: index,
            children: [
              ScaffoldPage(),
              ScaffoldPage(),
            ],
          ),

Scaffolding page

The scaffolding page is Material Scaffold in Fluent Design.

The Header property specifies the top bar.

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

The Content attribute specifies other widgets in ScaffoldPage, similar to the body attribute in Material Scaffold.

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

Here is what my app looks like so far:

Navigator.push & Navigator.pop

FluentApp supports the same navigation functions as MaterialApp because we all like it. However, when browsing pages in FluentApp, we use FluentPageRoute instead of MaterialPageRoute.

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

https://ducafecat.tech/

https://github.com/ducafecat

Past

Open source

WeChat discussion group ducafecat

Series collection

Translation

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

Open source project

https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/

Dart programming language basics

https://space.bilibili.com/404904528/channel/detail?cid=111585

Getting started with Flutter zero foundation

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter actual combat from scratch news client

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter component development

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578