Responsive and Adaptive UI in Flutter/

...

/

Adaptive Design for Desktop

Adaptive Design for Desktop

Learn how to create macOS, Windows, and Linux applications that look native using Flutter.

We'll cover the following...

A Flutter application is adaptive if it can change functionality and UI based on the platform it’s running on. When creating an application for desktop environments like macOS, Windows, and Linux, we want to use the specific idioms and normalizations of the target platform. Using the right UI on the right platform will build trust with our users.

Users expect the application to behave similarly to other applications they’re familiar with. For instance, an alert dialog on macOS is different compared to one on Windows or one on Ubuntu Linux.

To build applications for macOS, Windows, and Ubuntu Linux, we can use external packages.

The macos_ui packages

The macos_ui package is a collection of widgets and themes that implement the design language of macOS.

import 'package:device_preview/device_preview.dart';
import 'package:flutter/material.dart';
import 'package:macos_ui/macos_ui.dart';
import 'package:flutter/cupertino.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return DevicePreview(
      tools: const [
        DeviceSection(),
      ],
      builder: (context) {
        return MacosApp(
          title: 'A macOS app',
          theme: MacosThemeData.light(),
          darkTheme: MacosThemeData.dark(),
          themeMode: ThemeMode.light,
          debugShowCheckedModeBanner: false,
          home: MacosWindow(
            sidebar: Sidebar(
              minWidth: 200,
              bottom: const Padding(
                padding: EdgeInsets.all(16.0),
                child: MacosListTile(
                  leading: MacosIcon(CupertinoIcons.profile_circled),
                  title: Text('Your name'),
                  subtitle: Text('your_email@example.com'),
                ),
              ),
              builder: (context, controller) {
                return SidebarItems(
                  currentIndex: 0,
                  onChanged: (i) {},
                  items: const [
                    SidebarItem(
                      leading: MacosIcon(CupertinoIcons.square_on_circle),
                      label: Text('Page 1'),
                    ),
                    SidebarItem(
                      leading: MacosIcon(CupertinoIcons.square_on_circle),
                      label: Text('Page 2'),
                    ),
                    SidebarItem(
                      leading: MacosIcon(CupertinoIcons.square_on_circle),
                      label: Text('Page 3'),
                    ),
                    SidebarItem(
                      leading: MacosIcon(CupertinoIcons.square_on_circle),
                      label: Text('Page 4'),
                    ),
                  ],
                );
              },
            ),
          ),
        );
      },
    );
  }
}
Use MacosApp to create a Flutter application with the macOS style

In line 20, we return a MacosApp that uses MacosThemeData in lines 22 and 23. We need MacosApp to get the correct ...