scaled_app 0.1.0

Scale the entire UI design without hassle.

Scale the entire UI design without hassle.

Button, image, font, everything is scaled automatically.

Design for one screen size, scale for all the others.

Before:

• 250x250 square is the same size across devices

After:

• 250x250 square is two thirds the screen width across devices

• if we resize the screenshots above to be the same width
• then everything appears the same size (see below)

Features

Use this package in your Flutter app when:

• the UI design is fixed on one screen width
• you want to scale the entire UI, not just part of it

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  scaled_app: ^0.1.0

Import it:

import 'package:scaled_app/scaled_app.dart';

Usage

Replace runApp with runAppScaled

void main() {
  // 1st way to use this package
  // baseWidth is the screen width used for your UI design
  runAppScaled(const MyApp(), baseWidth: 375);
}

Or, replace WidgetsFlutterBinding with ScaledWidgetsFlutterBinding

void main() {
  // 2nd way to use this package
  // Scaling will be applied to screen width from [fromWidth] to [toWidth].
  ScaledWidgetsFlutterBinding.ensureInitialized(
    baseWidth: 375,
    fromWidth: 300,
    toWidth: 400,
  );
  runAppScaled(const MyApp());
}