Low-Cost Screen Adaptation Solutions in Flutter

Introduces the problem of screen adaptation in Flutter, explaining physical pixels and logical pixels, and the relationship: physical pixel = logical pixel × devicePixelRatio.

Reviews the popular flutter_screenutil solution, showing its core code:

double get scaleWidth => _screenWidth / uiSize.width;
double setWidth(num width) => width * scaleWidth;

Usage example:

Container(width: ScreenUtil().setWidth(50), height: ScreenUtil().setHeight(200));
Container(width: 50.w, height: 200.h);

Discusses limitations of flutter_screenutil (intrusive, maintenance overhead).

Proposes a low‑cost approach by modifying the engine’s ViewConfiguration: override devicePixelRatio in FlutterWindow.setViewConfiguration, e.g.:

final modifiedViewConfiguration = window.viewConfiguration.copyWith(devicePixelRatio: window.physicalSize.width / 375);
window.setViewConfigureation(modifiedViewConfiguration);

Notes that this requires SDK recompilation and may cause maintenance issues.

Presents an application‑layer solution by subclassing WidgetsFlutterBinding, overriding createViewConfiguration and handling pointer events to keep gesture coordinates correct:

class MyWidgetsFlutterBinding extends WidgetsFlutterBinding {
  @override
  ui.ViewConfiguration createViewConfiguration() {
    return ui.ViewConfiguration(
      devicePixelRatio: window.physicalSize.width / 375,
    );
  }
  @override
  void handleMetricsChanged() {
    renderView.configuration = createViewConfiguration();
    scheduleForcedFrame();
  }
  @override
  void initInstances() {
    super.initInstances();
    window.onPointerDataPacket = _handlePointerDataPacket;
  }
  void _handlePointerDataPacket(PointerDataPacket packet) {
    _pendingPointerEvents.addAll(PointerEventConverter.expand(packet.data, window.physicalSize.width / 375));
    if (!locked) _flushPointerEventQueue();
  }
}

Shows how to run the app with the custom binding:

void runMyApp(Widget app) {
  MyWidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}
void main() => runMyApp(MyApp());

Additionally, fixes MediaQuery size and gesture issues by wrapping MaterialApp with a builder that adjusts MediaQueryData:

builder: (context, widget) => MediaQuery(
  child: widget,
  data: MediaQuery.of(context).copyWith(
    size: Size(375, window.physicalSize.height / (window.physicalSize.width / 375)),
    devicePixelRatio: window.physicalSize.width / 375,
    textScaleFactor: 1.0,
  ),
)

Concludes that the application‑layer method is low‑cost, non‑intrusive, and maintains correct UI and gesture handling, while suggesting further research into engine‑level hooks for even more elegant solutions.