flutter_ui_scaler 0.1.2 copy "flutter_ui_scaler: ^0.1.2" to clipboard
flutter_ui_scaler: ^0.1.2 copied to clipboard

Accurate, orientation-aware scaling for Flutter that keeps your UI pixel-perfect across devices.

flutter_ui_scaler #

pub
points CI License

Achieve pixel-perfect scaling for your Flutter UI with ease.
🎯 Ensure your designs look consistent and accurate across devices, whether on phones or tablets, in portrait or landscape orientation.


✨ Why Use This Plugin? #

Flutter’s MediaQuery scaling is not design-accurate.
Different DPIs and aspect ratios distort layouts β€” especially in landscape, where text suddenly becomes huge. 60px in figma is not 60px on device! Not with flutter natively.

Figma Design With flutter_ui_scaler Without (native scaling)

πŸ‘‰ Notice how proportions, text size, and padding stay true to the design with the plugin.

Landscape Behaviour #

With Without

βœ… Text scaling stays consistent
❌ Native scaling causes bloated titles and mismatched spacing


πŸ“¦ Installation #

From terminal:

flutter pub add flutter_ui_scaler

Or add to pubspec.yaml:

dependencies:
  flutter_ui_scaler: ^latest

Then import:

import 'package:flutter_ui_scaler/flutter_ui_scaler.dart';

πŸš€ Quick Start #

return UiScaleScope(
  figmaW: 440,  // your design frame width
  figmaH: 956,  // your design frame height
  child: MaterialApp(home: MyApp()),
);

Inside widgets:

final ds = context.ds; // sugar for DesignScale.of(context)
double pad = ds.sx(16); // padding, radius, sizes
double titleSize = ds.sp(20); // font sizes

βš™οΈ CLI (Optional) #

Team defaults can be set via CLI:

flutter_ui_scaler --set-des-res 440x956
flutter_ui_scaler --set-clamp 0.9..1.15
flutter_ui_scaler --show

This generates .flutter_ui_scaler.yaml for shared design settings.


🧠 API Overview #

DesignScale.of(
  context,
  figmaW: 440,
  figmaH: 956,
  minScale: 0.9,
  maxScale: 1.15,
  tightFontsInLandscape: true,
);
  • sx / sy β€” scaling for padding, widths, radii, heights.
  • sp β€” scaling for fonts with smart landscape strategy.
  • UiScaleScope β€” app-wide configuration.
  • context.ds β€” shorthand for DesignScale.of(context).

πŸ“ Best Practices #

  • βœ… Use sx / sy for paddings, radii, widths, heights.
  • βœ… Use sp only for text.
  • 🚫 Don’t scale bitmap images.
  • πŸ§ͺ Test on multiple screen sizes (e.g., small phones, tablets, landscape).

πŸ“ Changelog #

See CHANGELOG.md.


πŸ“„ License #

MIT Β© MNBLabs

3
likes
160
points
110
downloads

Publisher

unverified uploader

Weekly Downloads

Accurate, orientation-aware scaling for Flutter that keeps your UI pixel-perfect across devices.

Homepage
Repository (GitHub)
View/report issues

Topics

#flutter #responsive #layout #scaling #typography

Documentation

API reference

License

MIT (license)

Dependencies

args, flutter, meta

More

Packages that depend on flutter_ui_scaler