responsive_helper 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 55

responsive_helper #

ResponsiveHelper package helps you to make your Flutter app responsive. Just import the package and then use it to make your app responsive.

Usage #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Wrap with LayoutBuilder: It will give us the screen height and width
    return LayoutBuilder(
      builder: (context, constraints) {
        // Wrap with OrientationBuilder if you want your app to be landscape and portrait:
        return OrientationBuilder(
          builder: (context, orientation) {
            // Initialize the ResponsiveHelper
            ResponsiveHelper().init(constraints, orientation);
            return MaterialApp(
              theme: AppTheme.theme,
              title: 'ResponsiveHelper Package Examples',
            );
          },
        );
      },
    );
  }
}
  - use textSizeMultiplier to set the Text size
  - use imageSizeMultiplier to set the Image and Icon size
  - use heightMultiplier to set height size
  - use widthMultiplier to set weight size

  Example:
    If you want to set the text size to 28
    Divide 28 to 7.9 (because it's text, so we use 'Vertical Block Size')
    and then multiply it to textSize Multiplier
    Or
    If you want to set the width to 200
    Divide 200 to 4.1 (because it's horizontal, so we use 'Horizontal Block Size')
    and then multiply it to imageSizeMultiplier or widthMultiplier

if you need more examples, See setSizeExample.dart.

Notice: In this example I used Google Pixel 3 XL as the main device to config the block sizes.So the Vertical Block Size: 7.9 and the Horizontal Block Size: 4.1 is. But, you can use any devices you want.

[1.0.0] - Stable release #

  • Package name renamed to ResponsiveHelper

[0.1.4] #

  • Update Example

[0.1.3] #

  • Update Example

[0.1.2] #

  • Fix the widthMultiplier issue

[0.1.0] #

  • Add widthMultiplier

[0.0.3] #

  • Some small changes in functions

[0.0.2] #

  • Update LICENSE

[0.0.1] - Release #

  • Initial release.

example/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Wrap with LayoutBuilder: It will give us the screen height and width
    return LayoutBuilder(
      builder: (context, constraints) {
        // Wrap with OrientationBuilder if you want your app to be landscape and portrait:
        return OrientationBuilder(
          builder: (context, orientation) {
            // Initialize the ResponsiveHelper
            ResponsiveHelper().init(constraints, orientation);
            return MaterialApp(
              theme: AppTheme.theme,
              title: 'ResponsiveHelper Package Examples',
            );
          },
        );
      },
    );
  }
}

/*

  Notice:
  I'm using Pixel 3 XL as the main device to config the block sizes:
  - Vertical Block Size: 7.9 (and 8.4 if it's full-screen)
  - Horizontal Block Size: 4.1

  * You can see the vertical and horizontal block sizes of your device screen in the Console log
  ---------------------------------------
  Usage:
  - use textSizeMultiplier to set the Text size
  - use imageSizeMultiplier to set the Image and Icon size
  - use heightMultiplier to set height size
  - use widthMultiplier to set weight size

  Example:
  If you want to set the text size to 28
  Divide 28 to 7.9 (because it's text, so we use 'Vertical Block Size')
  and then multiply it to textSize Multiplier
  Or
  If you want to set the width to 200
  Divide 200 to 4.1 (because it's horizontal, so we use 'Horizontal Block Size')
  and then multiply it to imageSizeMultiplier or widthMultiplier

*/

class AppTheme {
  AppTheme._();

  static final ThemeData theme = new ThemeData(textTheme: textTheme);

  static final TextTheme textTheme = new TextTheme(
    title: _title,
    subtitle: _subTitle,
    button: _button,
  );

  static final TextStyle _title = TextStyle(
    color: Colors.black,
    // The font size I want is 20 so I divide 20 to 7.9 and then multiply it to text Size Multiplier
    fontSize: 2.5 * ResponsiveHelper.textSizeMultiplier, // 20
  );

  static final TextStyle _subTitle = TextStyle(
    color: Colors.grey,
    // The font size I want is 15 so I divide 15 to 7.9 and then multiply it to text Size Multiplier
    fontSize: 1.8 * ResponsiveHelper.textSizeMultiplier, // 15
  );

  static final TextStyle _button = TextStyle(
    color: Colors.blue,
    // The font size I want is 12 so I divide 12 to 7.9 and then multiply it to text Size Multiplier
    fontSize: 1.5 * ResponsiveHelper.textSizeMultiplier, // 12
  );
}

// =============================================================================
// More Example ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// =============================================================================

class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.blue,
      appBar: new AppBar(
          centerTitle: true,
          title: Text(
            'Example',
            style: TextStyle(
                fontSize: 2.5 * ResponsiveHelper.textSizeMultiplier), // 20
          )),
      body: new Stack(
        children: <Widget>[
          new Container(
            padding: EdgeInsets.all(
                // 15
                3.6 * ResponsiveHelper.imageSizeMultiplier), // all: 15
            child: new Row(
              children: <Widget>[
                new Image.asset(
                  'assets/images/xeniac.png',
                  // width: 200,
                  // height: 200,

                  /*
                  Here I want my image size to be 200*200
                  so first, I divide 200 to 7.9
                  and then I multiple results (48.7) to ResponsiveHelper.textSizeMultiplier
                  */

                  width: 48.7 * ResponsiveHelper.imageSizeMultiplier, // 200
                  height: 48.7 * ResponsiveHelper.imageSizeMultiplier, // 200
                  fit: BoxFit.contain,
                ),
                new Image.asset(
                  'assets/images/xeniac.png',
                  // width: 170,
                  // height: 170,
                  width: 41.4 * ResponsiveHelper.imageSizeMultiplier, // 170
                  height: 41.4 * ResponsiveHelper.imageSizeMultiplier, // 170
                  fit: BoxFit.contain,
                ),
              ],
            ),
          ),
          new Padding(
              padding: EdgeInsets.symmetric(horizontal: 120, vertical: 180),
              child: new Column(
                children: <Widget>[
                  new Image.asset(
                    'assets/images/xeniac.png',
                    // width: 180,
                    // height: 180,
                    width: 43.9 * ResponsiveHelper.imageSizeMultiplier, // 180
                    height: 43.9 * ResponsiveHelper.imageSizeMultiplier, // 180
                    fit: BoxFit.contain,
                  ),
                ],
              )),
          new Padding(
              padding: EdgeInsets.only(
                  // top: 450,
                  // right: 20,
                  // left: 20
                  top: 56.9 * ResponsiveHelper.heightMultiplier, // 450
                  right: 4.8 * ResponsiveHelper.widthMultiplier, // 20
                  left: 4.8 * ResponsiveHelper.widthMultiplier // 20
                  ), // 20
              child: new Text(
                'This is a simple example to show how to ResponsiveHelper package works',
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 1.8 * ResponsiveHelper.textSizeMultiplier // 15),
                    ),
              )),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  responsive_helper: ^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:responsive_helper/responsive_helper.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
10
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
55
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • responsive_helper that is a package requiring null.

Health issues and suggestions

Document public APIs. (-1 points)

12 out of 12 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test