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 #

License #

MIT License. See LICENSE for details.