Screen Adaptation Strategies for Flutter Windows and Android Desktop Applications

Introduction

During Flutter desktop development, developers need to adapt UI to screens of various sizes so that the visual experience remains consistent across devices, e.g., maintaining a 2/3 height‑to‑screen ratio on both a personal PC and a 60‑inch display.

Basic Concepts of Screen Adaptation

Define screen size (diagonal length), resolution (total pixel count), and screen density (dpi). Explain the basic principle: an image that appears 800×800 px on a 160 dpi screen must be 1600×1600 px on a 320 dpi screen to keep visual size constant.

Common Approach on Mobile

Flutter mobile projects typically use the flutter_screenutil plugin, which calculates a scaling factor from the design draft size to the device’s logical pixel size and multiplies all widget dimensions by that factor.

extension SizeExtension on num {
  /// [ScreenUtil.setWidth]
  double get w => ScreenUtil().setWidth(this);
  /// [ScreenUtil.setHeight]
  double get h => ScreenUtil().setHeight(this);
  // …
}

Problems on Desktop

Desktop devices have a wide range of physical sizes while pixel density varies little, making simple scaling insufficient. MediaQueryData returns the window size, not the full screen size, so the scaling factor derived from it is inaccurate for desktop windows, leading to oversized fonts and multi‑monitor bugs.

Desktop Solution

Goal: make the application occupy a constant proportion of the physical screen regardless of resolution, density, or system scaling. Introduce a new constructor parameter app2screenWithWidth to let developers specify the ratio between the app window width and the screen width (e.g., 0.7 for 70%). Use the screen_retriever package to obtain the real screen size, compute a conversion coefficient, and adjust ScreenUtil ’s internal size accordingly.

class ScreenUtilInit extends StatefulWidget {
  const ScreenUtilInit({
    Key? key,
    required this.builder,
    this.child,
    this.rebuildFactor = RebuildFactors.size,
    this.designSize = ScreenUtil.defaultSize,
    this.app2screenWithWidth = 1,
    this.splitScreenMode = false,
    this.minTextAdapt = false,
    this.useInheritedMediaQuery = false,
  }) : super(key: key);
  // …
}

In the initialization routine, when running on desktop, retrieve the primary display via screenRetriever.getPrimaryDisplay() , calculate appWidth = deviceSize.width * app2screenWithWidth and derive appHeight from the design aspect ratio, then set _uiSize to these values. All subsequent .w , .h , etc., automatically use the corrected coefficient.

Resource Adaptation

Define three device categories (large, medium, small) and place separate asset sets under the assets directory, naming them accordingly (e.g., larger, medium, small) to ensure images remain sharp on different screen sizes.

Conclusion

The proposed modifications have been verified in a demo project and work as expected. The author plans to submit a pull request to the original flutter_screenutil repository and hopes the Flutter desktop community continues to grow.