Search⌘ K
Home
Courses
Responsive and Adaptive UI in Flutter

Adaptive Design for Desktop

Learn how to create adaptive Flutter applications for desktop by applying platform-specific design principles. This lesson covers using macos_ui, fluent_ui, and yaru packages to build interfaces that match macOS, Windows, and Ubuntu Linux standards. Understand how to detect platforms, integrate different UI widgets, and build custom platform-aware components to ensure your apps feel native and trustworthy across desktop environments.

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 ...