relative_scale 1.0.5

  • Readme
  • Changelog
  • Example
  • Installing
  • 65

RelativeScale for Flutter #

RelativeScaler is a simple and custom sizing system for flutter widgets to achieve the same physical sizes across different devices.

Preview #

My base screensize when layouting these widgets is 480 x 800. Source code for this preview app is here. Scaled Now, look at this scaled widgets with RelativeScale. There is a difference yeah, but that's because of the system scaled sizes like the AppBar (look at the appbar's height :) ). Now let's forget about that and focus on the texts and the rectangle containers. They are definitely same sizes.

Unscaled Now, for unscaled sizes, no RelativeScale at all. Well, that's quite obvious :). Look at the texts on the last image, they are very small comparing to the first image. And the rectangle containers, very big difference.

Usage #

It is VERY easy to use.

// Usage in Stateful/State
import 'package:flutter/material.dart';
import 'package:relative_scale/relative_scale.dart';


class ScaledExample extends StatefulWidget {
. . .

class _ScaledExampleState extends State<ScaledExample> with RelativeScale {
  @override
  Widget build(BuildContext context) {
    // important: initialize relative scale.
    initRelativeScaler(context);

    return Container(
      // screenHeight and screenWidth is part of the mixin.
      height: screenHeight,
      width: screenWidth,
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
              height: sy(160),
              width: sy(240),
              margin: EdgeInsets.all(sy(12)),
              color: Colors.redAccent,
              child: Center(
                child: Text(
                  "Scaled Text 1",
                  style: TextStyle(
                    fontSize: sy(24),
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Container(
              height: sy(80),
              width: sy(280),
              margin: EdgeInsets.all(sy(12)),
              color: Colors.green,
              child: Center(
                child: Text(
                  "Scaled Text 2",
                  style: TextStyle(
                    fontSize: sy(24),
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Container(
              height: sy(120),
              width: sy(240),
              margin: EdgeInsets.all(sy(12)),
              color: Colors.blue,
              child: Center(
                child: Text(
                  "Scaled Text 3",
                  style: TextStyle(
                    fontSize: sy(24),
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Full example is in the Example section.

Now, this example is implemented in Stateful->State widget. How about Stateless widget?

Well, if you implement it on a stateless widget, you'll get an analyzer warning saying Stateless class is immutable. But the RelativeScaler mixin's properties are not final so it's mutable.

YOU CAN STILL USE the mixin in Stateless widget and run the app fine without problems actually. It's just a linter warning but if you don't wanna see it, you can setup a custom analyzer options, like this:

analysis_options.yaml :

analyzer:
  errors:
    must_be_immutable: ignore

This file must be in your project root directory. But please note that we're breaking dart rules here :) It's all on you.

Scaling Notes #

Ok so I'm pretty sure some or most of you is going to use this on existing projects.

For instance you have a container widget like this:

Container(
    height: 300,
    width: 500,
)

and you implemented RelativeScaler:

Container(
    height: sy(300),
    width: sx(500),
)

they will not be the same size anymore, using relative scaler will make your sizes a bit bigger. But the hard work will payoff after adjusting your sizes because your app will now have the same widget sizes in every screen size.

Please note that these scaler methods are relative to screen size. So basically in this case sy(50) and sx(50) is NOT the same size.

ALSO, another thing to note is that if you use sy for height and sx for width (or vice-versa), you'll get widgets with the same ratio (not size) which is still useful. The Scaled preview image above uses only sy, and containers and text has the same size across different screens.

If you want to make a perfect Square container, DON'T do this:

Container(
    height: sy(300),
    width: sx(300),
)
// Yeah they are the same value "300", but they are not the same unit 'cause you used "sx" on the width.

DO this instead:

Container(
    height: sy(300), // or sx(value)
    width: sy(300), // or sx(value)
)

1.0.0 #

  • Initial version.

1.0.1 #

  • Added example.dart

1.0.2 #

  • Updated library description documentation.

1.0.3 #

  • Rename the mixin RelativeScaler to RelativeScale to follow package name.

version: 1.0.4 #

  • Added documentation and previews on readme and updated example.dart

version: 1.0.5 #

  • Added link to the preview app.

example/example.dart

import 'package:flutter/material.dart';
import 'package:relative_scale/relative_scale.dart';

class ScaledExample extends StatefulWidget {
  ScaledExample({Key key}) : super(key: key);

  @override
  _ScaledExampleState createState() => _ScaledExampleState();
}

// RelativeScaler is a mixin
class _ScaledExampleState extends State<ScaledExample> with RelativeScale {
  @override
  Widget build(BuildContext context) {
    // this is very important, you should always call this whenever you implement RelativeScaler on a widget.
    initRelativeScaler(context);

    /* You'll see "sy" and "sx" below: */
    /* which means "sy" = size relative to height of the screen. */
    /* which means "sx" = size relative to width of the screen. */

    return Container(
      height: screenHeight,
      width: screenWidth,
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
              height: sy(160),
              width: sy(240),
              margin: EdgeInsets.all(sy(12)),
              color: Colors.redAccent,
              child: Center(
                child: Text(
                  "Scaled Text 1",
                  style: TextStyle(
                    fontSize: sy(24),
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Container(
              height: sy(80),
              width: sy(280),
              margin: EdgeInsets.all(sy(12)),
              color: Colors.green,
              child: Center(
                child: Text(
                  "Scaled Text 2",
                  style: TextStyle(
                    fontSize: sy(24),
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Container(
              height: sy(120),
              width: sy(240),
              margin: EdgeInsets.all(sy(12)),
              color: Colors.blue,
              child: Center(
                child: Text(
                  "Scaled Text 3",
                  style: TextStyle(
                    fontSize: sy(24),
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  relative_scale: ^1.0.5

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:relative_scale/relative_scale.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
29
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
65
Learn more about scoring.

We analyzed this package on Feb 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.5.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8