flutter_screen_scaler 1.0.0

flutter_screen_scaler #

A package to resize your widgets according to the screen size with the use of percentages.

Usage: #

Depend on it #

dependencies:
  flutter:
    sdk: flutter
  // append the line below to your dependancy list
  flutter_screen_scaler: ^0.0.1

Import it into your Dart file #

import 'package:flutter_screen_scaler/flutter_screen_scaler.dart';

Use it! #

Widget build(BuildContext context) {
  ScreenScaler scaler = new ScreenScaler..init(context);

  return Container(
      color: Colors.amber,
      child: Column(
        children: <Widget>[
          // to prevent overlapping with the status bar
          Container(height: 30),
          Container(
            alignment: Alignment.center,
            color: Colors.white,
            // take 50% of the height
            height: scaler.getHeight(50),
            // take 50% of the height
            width: scaler.getWidth(90),
            child: Text(
              "Height:50%\nWidth:90%\nFont Size:15%",
              style: TextStyle(
                fontSize: scaler.getTextSize(15),
            ),
          ),
        )
      ],
    ),
  );
}

You can find the whole code at example/example.dart

Screenshots #

screenshot

You can see that with the use of percentages it's much easier to create responsive applications.

Sample application will be linked soon.

Why? #

Imagine you have a phone with a big screen size (I own a OnePlus 6, quite big). You develop a flutter application using a bunch of Cards, Container and what not. Sometimes you'll find yourself giving them heights and widths, you try different heights to fit the perfect match for your phone. Great! Now try running this Flutter application on an iPhone 5s, you be bombarded with a ton of error messages and Screen Overflow warnings on your phone. This is where Flutter Screen Scaler comes into play! It will resize all your widgets according to the percentage you provide and the phone's screen dimension. It's pretty much just like using percentages in HTML.

[1.0.0] - 17/06/2019

  • Added support for getting the width dynamically using percentages.
  • Added support for getting the height dynamically using percentages.
  • Added support for getting the text size dynamically using percentages.

example/example.dart

import 'package:flutter/material.dart';
import '../lib/flutter_screen_scaler.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Screen Scaler Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExamplePage(),
    );
  }
}

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

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

class _ExamplePageState extends State<ExamplePage> {
  @override
  Widget build(BuildContext context) {
    ScreenScaler scaler = ScreenScaler()..init(context);

    return Scaffold(
      body: Container(
        color: Colors.amber,
        child: Column(
          children: <Widget>[
            // to prevent overlapping with the status bar
            Container(height: 30),
            Container(
              alignment: Alignment.center,
              color: Colors.white,
              // take 50% of the height
              height: scaler.getHeight(50),
              // take 50% of the height
              width: scaler.getWidth(90),
              child: Text(
                "Height:50%\nWidth:90%\nFont Size:15%",
                style: TextStyle(
                  fontSize: scaler.getTextSize(15),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_screen_scaler: ^1.0.0

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:flutter_screen_scaler/flutter_screen_scaler.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
53
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]
77
Learn more about scoring.

We analyzed this package on Jul 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test

Admin