scaled_app 0.1.7

Scale the entire UI design proportionally, useful when the UI design is fixed-width.

Scale the entire UI design proportionally.

Button, image, font, everything is scaled automatically.

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 across devices (see below)

Features

Use this package in your Flutter app when:

• the UI design is fixed-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.7

For projects using Flutter 3.0, add the following dependency:

dependencies:
  ...
  scaled_app:
    git:
      url: https://github.com/LastMonopoly/scaled_app.git
      ref: master

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 when `inRange(deviceWidth)` returns true.
  ScaledWidgetsFlutterBinding.ensureInitialized(
    baseWidth: 375,
    inRange: (deviceWidth) => deviceWidth > 300 && deviceWidth < 400,
  );
  runAppScaled(const MyApp());
}