- Notifications
You must be signed in to change notification settings - Fork8
Scale the entire UI design proportionally, useful when your UI design is fixed-width.
License
NotificationsYou must be signed in to change notification settings
LastMonopoly/scaled_app
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Scale the entire UI design proportionally.
Button, image, font, every widget is scaled simultaneously.
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
https://lastmonopoly.github.io/flutter_web_app/scaled_app_demo/
Use this package in your Flutter app when:
- your UI design is fixed-width
- you want to scale the entire UI, not just part of it
Firstly, replacerunApp withrunAppScaled
voidmain() {// 1st way to use this packagerunAppScaled(constMyApp(), scaleFactor: (deviceSize) {// screen width used in your UI designconstdouble widthOfDesign=375;return deviceSize.width/ widthOfDesign; });}
Or, replaceWidgetsFlutterBinding withScaledWidgetsFlutterBinding
voidmain() {// 2nd way to use this package// Scaling will be applied based on [scaleFactor] callback.ScaledWidgetsFlutterBinding.ensureInitialized( scaleFactor: (deviceSize) {// screen width used in your UI designconstdouble widthOfDesign=375;return deviceSize.width/ widthOfDesign; }, );runApp(constMyApp());}
Then, useMediaQueryData.scale to scale size, viewInsets, viewPadding, etc.
classPageRouteextendsStatelessWidget {constPageRoute({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {returnMediaQuery( data:MediaQuery.of(context).scale(), child:constScaffold(...), ); }}
Optionally, updateScaledWidgetsFlutterBinding.instance.scaleFactor to enable / disable scaling on demand.
About
Scale the entire UI design proportionally, useful when your UI design is fixed-width.
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published