MK Sizer

MK Size helper created using concept of responsive_sizer and flutter_screen_util package.

Installation


dependencies:
  mk_sizer: ^1.2.0

Usage


Import the package

import 'package:mk_sizer/mk_sizer.dart';

Wrap MaterialApp with MKSizer widget


MKSizer( 
  builder: (context) {
    return MaterialApp(
      home: HomePage(),
    );
  },
);

Widget Size


Container(
  width: 20.w,   
  height: 30.5.h     
)

Text Size


Text(
  'MK Sizer', 
  style: TextStyle(fontSize: 15.sp), 
)

Gap


Column(
  children: [
    Text('Above'),
    10.gap,
    Text('Below'),
  ],
)

10.gap is a responsive Gap-like widget: it detects whether its parent Flex is a Row or Column and scales with .w or .h accordingly, so the same call works in either direction.

Aspect ratio and scale limits


MKSizer(
  designSize: Size(430, 932),
  respectAspectRatio: true,
  minScaleFactor: 0.8,
  maxScaleFactor: 1.4,
  minTextScaleFactor: 0.9,
  maxTextScaleFactor: 1.1,
  builder: (context) => MaterialApp(home: HomePage()),
);
  • respectAspectRatio blends the width/height scales toward each other as the device's aspect ratio diverges from designSize's, so layouts stretch less on tablets. Default false (independent per-axis scaling).
  • minScaleFactor / maxScaleFactor clamp .w/.h/.r (with or without respectAspectRatio), so tablets and foldables don't get 2-3x UI.
  • minTextScaleFactor / maxTextScaleFactor clamp .sp independently, regardless of respectAspectRatio.

Android & consistent fonts


MKSizer(
  heightMode: MKHeightMode.safeArea, // or MKHeightMode.width
  designSize: Size(430, 932),
  designPadding: EdgeInsets.only(top: 59, bottom: 34), // bars inside the frame
  minScaleFactor: 0.85,
  maxScaleFactor: 1.3,
  minTextScaleFactor: 0.9,
  maxTextScaleFactor: 1.1,
  minSystemTextScale: 0.9,
  maxSystemTextScale: 1.3,
  builder: (context) => MaterialApp(
    theme: ThemeData(fontFamily: 'Inter'), // same font on both platforms
    home: HomePage(),
  ),
);
  • heightMode: tall Android phones (20:9+) inflate .h 15-30% over .w. safeArea subtracts system bars when MKSizer wraps the whole app; width makes .h use the width scale (never stretches vertically). Default screen is the original behavior. Design frames usually include the status bar/notch and home indicator, so with safeArea also pass designPadding (the bars inside your frame); then usable device area is compared with usable design area.
  • minSystemTextScale / maxSystemTextScale clamp the user's OS font-size setting (Android allows ~2x, iOS less) for all text below MKSizer, including inside MaterialApp. minTextScaleFactor / maxTextScaleFactor clamp .sp (screen-size scaling); the two multiply.
  • Fonts differ because Android defaults to Roboto and iOS to SF. Bundle one fontFamily in your theme for identical glyph widths and line heights.

Responsive builder


MKResponsiveBuilder(
  mobile: (context) => MobileLayout(),
  tablet: (context) => TabletLayout(),
);

final padding = context.resValue(mobile: 16.0, tablet: 24.0, desktop: 32.0);

Tiers come from the MediaQuery width (smallMobile < 360 <= mobile < 600 <= tablet < 1024 <= desktop); missing tiers fall back to the next-smaller one, ultimately mobile.

Notes

  • .w/.h/.sp/.r scale 1:1 until an MKSizer has laid out.
  • .sp scales by width only; .r uses the smaller of the width/height scales.
  • Default design size is 360x690; pass designSize: to change it.
  • Sizes are recalculated whenever the available size changes (rotation, window resize), and the whole subtree rebuilds so 10.w is correct everywhere, including const widgets.
  • For fewer rebuilds, pass rebuildOnChange: false and use the context form (context.w(20), context.h(30), context.sp(15)); each widget then rebuilds only when its own axis changes. 10.w is not tracked in that mode.

Libraries

mk_sizer