- 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
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
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.