Introduction

Flutter is no longer just for phones — desktop targets (Windows, macOS, Linux) make window management an essential skill. This tutorial focuses on resizing and persisting window state for Flutter desktop apps. The patterns also help mobile development when you share UI logic (layout adaptivity, state persistence) across platforms.

Understanding Desktop Window APIs

Desktop window sizing differs from mobile screens: users can resize and move windows arbitrarily, DPI scaling varies per monitor, and each platform exposes different APIs for programmatic control. At the Flutter level you react to size changes with LayoutBuilder or WidgetsBindingObserver.didChangeMetrics; to set size or position you typically call a platform package (for example window_manager or bitsdojo_window). Persisting size/position is application logic: save logical size/position (not raw pixels) and restore on startup.

Key points:

• Use logical pixels (MediaQuery.size) to avoid DPI errors.

• Don’t assume a single display; check scaleFactor when reading raw window metrics.

• Separate detection (Flutter widgets) from control (platform package).

Handling Resize Events

Detect resizing using Flutter layout primitives or the binding observer. For most apps, reacting inside build via LayoutBuilder or MediaQuery is sufficient and idiomatic — the widget tree rebuilds when constraints change. For centralized tracking (e.g., to persist on resize), implement WidgetsBindingObserver.didChangeMetrics and read logical size.

Example: save size on metric changes with minimal boilerplate.

class WindowSizeObserver with WidgetsBindingObserver {
  void start() => WidgetsBinding.instance.addObserver(this);
  @override
  void didChangeMetrics() async {
    final size = WidgetsBinding.instance.window.physicalSize /
        WidgetsBinding.instance.window.devicePixelRatio;
    final prefs = await SharedPreferences.getInstance();
    await prefs.setDouble('win_w', size.width);
    await prefs.setDouble('win_h', size.height);
  }
}

Practical tips when handling events:

• Debounce writes to disk to avoid frequent IO during continuous resize.

• Respect min/max constraints to prevent tiny, unusable windows.

• Update layout adaptively (not just scale) so content remains usable at all sizes.

Saving And Restoring Window State

Persistence requires two parts: capture and restore. Capture: save logical size, position, and optionally a flag for maximized/fullscreen state. Restore: on app startup, read prefs and call your platform API to set window geometry.

Use shared_preferences for a small, cross-platform key-value store. When restoring, convert stored logical values to whatever the platform package expects.

Example (restore pseudocode — platform call depends on the package you choose):

void restoreWindow() async {
  final prefs = await SharedPreferences.getInstance();
  final w = prefs.getDouble('win_w');
  final h = prefs.getDouble('win_h');
  if (w != null && h != null) await windowManager.setSize(Size(w, h));
}

Notes on reliability:

• Only restore when the system is ready to accept window commands (most packages expose a waitUntilReadyToShow or equivalent).

• If position is off-screen (monitor configuration changed), clip the coordinates to an available display.

• Respect user preference: if the user closed the app while maximized, prefer restoring maximized state rather than an arbitrary size.

Cross-Platform Considerations

Every desktop OS has quirks. Windows and Linux usually accept explicit set-size/position calls. macOS applies stricter sanity checks and uses points instead of pixels. Test these aspects:

• DPI and scale: always work in logical pixels for storage and conversion.

• Multiple displays: restore position relative to the primary display or clamp to visible areas.

• Window decorations: some toolkits include title-bar height; account for that when calculating content bounds.

Also consider when to persist: on metrics change (with debounce), on app lifecycle events (onWillPop / application close hooks), or both. For robust restoration, combine a short debounce with a final save on exit.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Managing desktop windows in Flutter combines Flutter’s reactive layout model with platform window controls. Detect size changes with LayoutBuilder or WidgetsBindingObserver, persist logical sizes and states using shared_preferences, and restore using a desktop window package while accounting for DPI and multiple displays. These patterns improve UX on desktop and keep your shared mobile/desktop code predictable and resilient.