flutter_autoscaler

A responsive layout and typography scaling solution for Flutter applications across mobile, desktop, and web.

Installation

Add flutter_autoscaler to your project:

flutter pub add flutter_autoscaler

Usage

Root Configuration

Wrap your root application widget with AutoScale to establish design boundaries and baseline metrics:

import 'package:flutter/material.dart';
import 'package:flutter_autoscaler/flutter_autoscaler.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return AutoScale(
      designWidth: 390,
      designHeight: 844,
      minFontScale: 0.85,
      maxFontScale: 1.3,
      child: MaterialApp(
        home: const HomeScreen(),
      ),
    );
  }
}

Responsive Units

Apply dedicated extensions on numeric values, insets, styles, and dimensions:

Container(
  width: 250.sx,
  height: 60.sy,
  padding: 16.autoPadX,
  margin: 12.autoPadY,
  decoration: BoxDecoration(
    borderRadius: 12.autoCircular,
  ),
  child: Text(
    'Responsive Title',
    style: TextStyle(fontSize: 16.sf),
  ),
);

Scoped Scaling

Isolate specific widgets or view subtrees by applying .autoScale() directly:

Widget build(BuildContext context) {
  return const Card(
    child: Text('Custom scope'),
  ).autoScale(
    minFontScale: 1.0,
    maxFontScale: 1.5,
  );
}

Configuration

Parameter	Type	Default	Description
`designWidth`	`double`	`375.0`	Target reference width from design canvas.
`designHeight`	`double`	`812.0`	Target reference height from design canvas.
`minFontScale`	`double`	`0.85`	Lower threshold for font scaling calculations.
`maxFontScale`	`double`	`1.30`	Upper threshold for font scaling calculations.
`clampFontScale`	`bool`	`true`	Restricts font scale factors within specified bounds.
`fontScaleMode`	`FontScaleMode`	`.width`	Axis strategy (`width`, `height`, `min`, `average`).
`scaleTextAutomatically`	`bool`	`true`	Propagates computed scale through `MediaQuery.textScaler`.
`scaleIconsAutomatically`	`bool`	`true`	Propagates computed scale through ambient `IconTheme`.
`respectSystemTextScale`	`bool`	`false`	Factor system accessibility text scaling into results.

License

MIT License. See LICENSE for details.