Demo

Flutter Adaptive Scaler

A lightweight Flutter package for fully responsive apps. Automatically scales fonts, sizes, padding, icons, radius, and UI elements for every screen, device, orientation, and web/desktop window resize.

Features

• Instant scaling based on your design reference size
• Universal support for mobile, tablet, web, and desktop
• Real-time updates on orientation changes and window resizing
• Simple extensions: .w, .h, .sp, .r, .i, and .p on any number
• Scoped scaling via ScalerScope so nested scalers do not overwrite each other
• Clear errors when extensions are used before the scaler is initialized

Getting Started

Add flutter_adaptive_scaler to your pubspec.yaml:

dependencies:
  flutter_adaptive_scaler: ^1.0.4

Import the package:

import 'package:flutter_adaptive_scaler/flutter_adaptive_scaler.dart';

Usage

Recommended: inside MaterialApp.builder

This ensures scaling uses the final MediaQuery from your app shell:

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => FlutterAdaptiveScaler(
        baseWidth: 375,
        baseHeight: 812,
        child: child ?? const SizedBox.shrink(),
      ),
      home: const MyHomePage(),
    );
  }
}

Alternative: wrap MaterialApp

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return FlutterAdaptiveScaler(
      baseWidth: 375,
      baseHeight: 812,
      builder: (context, child) => MaterialApp(
        home: const MyHomePage(),
      ),
    );
  }
}

FlutterScaler remains available as a backward-compatible alias for FlutterAdaptiveScaler.

Responsive extensions

Apply scaling to any number:

• 200.w — scale width
• 100.h — scale height
• 16.sp — scale font size
• 8.r — scale border radius
• 24.i — scale icon size
• 12.p — scale padding/margin

Container(
  width: 200.w,
  height: 100.h,
  padding: EdgeInsets.all(12.p),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8.r),
    color: Colors.blue,
  ),
  child: Column(
    children: [
      Icon(Icons.star, size: 24.i),
      Text('Hello Responsive!', style: TextStyle(fontSize: 16.sp)),
    ],
  ),
)

Context-based access

When you need scale factors directly:

final data = ScalerScope.of(context);
final widthScale = data.scaleWidth;

Scaling logic

The package calculates scale factors dynamically:

1. scaleWidth = currentWidth / baseWidth
2. scaleHeight = currentHeight / baseHeight
3. scaleText = min(scaleWidth, scaleHeight)

Using min keeps text and icons from overflowing when the screen aspect ratio differs from your design reference.

Supported platforms

Android, iOS, Web, Windows, macOS, and Linux.

API reference

Full API docs are available on pub.flutter-io.cn documentation.

Example

See the full dashboard demo in the example folder.

Author

Created by GreeLogix.