The Flutter builds beautiful Windows applications - fluid design structure and navigation

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

Wechat Flutter research group Ducafecat

The cat said

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

Interface construction, menu navigation Tab form commonly used control style extraction transition animation icon theme adaptive switch have

Clone sets if you use them and maintain or research them yourself

Github.com/bdlukaa/flu…

The original

Itnext. IO/flutter – bui…

code

Github.com/bdlukaa/flu…

reference

Pub. Dev/packages/fl…

The body of the

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

This guide is best suited for Win32 and UWP Flutter applications. If you haven’t set up your UWP flapping app yet, follow my other guidelines for doing so.

Add the required packages

The first step is to install the Fluent_UI package by Bdlukaa.

Pub. Dev/packages/fl…

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

You then create the FluentApp widget in the Build function, which is the foundation of the 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 ThemeData() and allows you to customize the appearance of your application. You can also set a separate darkTheme using the darkTheme property.

Some of the key properties of ThemeData () are EcastColor (the colors of the highlighted elements) and scaffoldBackgroundColor (the background colors 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 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

NavigationView controls movement between Fluent Design pages. Add a NavigationView to the Home property of the Fluent App as follows:

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

The navigation pane

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

Compressed: The pane is placed to the left of the content, showing only the icon until it is expanded.

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

This mode dynamically selects between Minimal, Compact, and Open depending on the width of the window.

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

To create a NavigationPane, use the Pane property of the 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,
          ),
      )
Copy the code

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’s 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

Now create a variable index of type int in the MyAppState class. This takes care of managing the selected pages in the NavigationPane.

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

We now link the index to the selected index of NavigationPane. Set the selected property of the NavigationPane as an index.

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

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

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

Optional: To add a Acrylic transparent effect to the NavigationPane, set the usecrylic property to true in the NavigationView.

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

NavigationBody

NavigationBody is used to implement page transformations as navigational views and perform related transformations as you switch between pages.

We can set NavigationBody to the content property of NavigationView.

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

Next, we 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

We then need to specify the children property as a List of widgets to display for each PaneItem. Note: The order of the children property widgets must be the same as the order of the PaneItem widgets.

Typically, these widgets are scaffolding page widgets:

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

Scaffolding page

The Scaffold Page is the Material Scaffold in Fluent Design.

The Header property specifies the top bar.

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

The Content property specifies the other widgets in 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 app looks like so far:

Navigator.push & Navigator.pop

FluentApp supports the same navigation functionality 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()));
Copy the code

ducafecat.tech/

github.com/ducafecat

The issue of

Open source

GetX Quick Start

Github.com/ducafecat/g…

News client

Github.com/ducafecat/f…

Strapi manual translation

getstrapi.cn

Wechat discussion group Ducafecat

A series of collections

The translation

Ducafecat. Tech/categories /…