https://github.com/LastMonopoly/scaled_app

Scale the entire UI design proportionally, useful when your UI design is fixed-width.
https://github.com/LastMonopoly/scaled_app

adaptive-layouts dart flutter layout package resize scale

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/LastMonopoly/scaled_app
• Owner: LastMonopoly
• License: bsd-3-clause
• Created: 2022-04-30T08:15:24.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-05-16T06:20:49.000Z (4 months ago)
• Last Synced: 2024-06-18T08:32:23.340Z (3 months ago)
• Topics: adaptive-layouts, dart, flutter, layout, package, resize, scale
• Language: C++
• Homepage: https://pub.dev/packages/scaled_app
• Size: 10.4 MB
• Stars: 14
• Watchers: 2
• Forks: 8
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


Scale the entire UI design proportionally.

Button, image, font, every widget is scaled simultaneously.

Before:

- 250x250 square is the same size across devices

![Screenshots of the same design before scaling](https://raw.githubusercontent.com/LastMonopoly/scaled_app/master/screenshots/Before.png "Screenshots before scaling")

  

After:

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

![Screenshots of the same design after scaling](https://raw.githubusercontent.com/LastMonopoly/scaled_app/master/screenshots/After.png "Screenshots after scaling")

- if we resize the screenshots above to be the same width

- then everything appears the same size as below

![Resized screenshots of the same design after scaling](https://raw.githubusercontent.com/LastMonopoly/scaled_app/master/screenshots/After_2.png "Resized screenshots after scaling")

## Live demo

https://lastmonopoly.github.io/flutter_web_app/scaled_app_demo/

## Features

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

## Usage

Firstly, replace `runApp` with `runAppScaled`

```dart

void main() {

  // 1st way to use this package

  runAppScaled(const MyApp(), scaleFactor: (deviceSize) {

    // screen width used in your UI design

    const double widthOfDesign = 375;

    return deviceSize.width / widthOfDesign;

  });

}

```

Or, replace `WidgetsFlutterBinding` with `ScaledWidgetsFlutterBinding`

```dart

void main() {

  // 2nd way to use this package

  // Scaling will be applied based on [scaleFactor] callback.

  ScaledWidgetsFlutterBinding.ensureInitialized(

    scaleFactor: (deviceSize) {

      // screen width used in your UI design

      const double widthOfDesign = 375;

      return deviceSize.width / widthOfDesign;

    },

  );

  runApp(const MyApp());

}

```

Then, use `MediaQueryData.scale` to scale size, viewInsets, viewPadding, etc.

```dart

class PageRoute extends StatelessWidget {

  const PageRoute({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MediaQuery(

      data: MediaQuery.of(context).scale(),

      child: const Scaffold(...),

    );

  }

}

```

Optionally, update `ScaledWidgetsFlutterBinding.instance.scaleFactor` to enable / disable scaling on demand.

## Reference

https://juejin.cn/post/7078816723666731021