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 as 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.2.1
For projects using Flutter 2.x.x, add the following dependency:
dependencies:
...
scaled_app:
git:
url: https://github.com/LastMonopoly/scaled_app.git
ref: flutter_2.x.x
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 [applyScaling] returns true
ScaledWidgetsFlutterBinding.ensureInitialized(
baseWidth: 375,
applyScaling: (deviceWidth) => deviceWidth > 300 && deviceWidth < 400,
);
runAppScaled(const MyApp());
}
Known Issues
This package currently won't work in Android release build.
6 Oct 20, 2022
15 May 3, 2022
214 Dec 26, 2022
82 Jan 4, 2023
5 Nov 29, 2022
3 Apr 22, 2022
54 Nov 22, 2022
18 Dec 21, 2022
3.4k Jan 6, 2023
731 Dec 28, 2022