response 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 84

Response #

Flutter UI package which will help you to build your responsive UI design as you wanted to be on any device as it recreates every widget to fit the device display size on which the app is working.

thumbnail

Features #

  • Easy to use, with so few but yet powerful methods.
  • Fast, very reliable and readable.
  • Saves you a lot of time trying to fit widget size to different displays.
  • Works on any Android/ IOS device (including iPad).
  • Works in Portrait mode or Landscape mode on the same device.

How to use #

First wrap your MaterialApp widget with Response.

     Response(
      originalScreenHeight: 759,
      originalScreenWidth: 392,
      child: MaterialApp(
        home: HomePage(),
      ),
    )

Note: Responsive needs to be at the top of your Widget Tree to be able to work and rebulid the widgets to a new size as the device display changes.

Note: if you want to use any functions features related to MediaQuery you must change the order to make the Response widget a child to the MaterialApp widget.

Second declare an instance response of ResponseUI() class at the top of your file.

final response = ResponseUI.instance;

And that is all to be able to initialize the package, Very easy!

to use the package on your widget you have 4 easy to use methods:

NameDescription
response.setWidth(width)Sets the widget width in pixels value to be relatively constant across all different display sizes.
response.setHeight(height)Sets the widget height in pixels value to be relatively constant across all different display sizes.
response.setFontSize(fontSize)Sets the text size in pixels to be relativly constant on all diplays sizes.
response.isDevicePortraitHelpful if you want to know whether the device orientation is in Portrait or in Landscape.
response.inMobilePortraitHelps you if you want to know whether the device you are working on a Mobile Portrait (returns true) or a Tablet Portrait mode (returns false).
response.screenWidthreturns the current device screen width as of type double.
response.screenPixelRatioreturns the current device screen ratio. (using MediaQuery)
response.textScaleFactorreturns the font scalling factore as of type double. (using MediaQuery)
response.bottomPaddingreturns the current device screen padding offset from the bottom. (using MediaQuery)
response.topPaddingreturns the current device screen padding offset from the top. (using MediaQuery)

Note: isDevicePortrait and inMobilePortrait returns a bool (true or false) with which you can know the current orientation state of your device.

Height and Width #

to set a width and height to for example a Container.

//We want the Container Widget to be 200px in width and 200px in height
    Container(
        width: response.setWidth(300), //setting the Container width to be 300px
        height: response.setHeight(200), //setting the Container height to be 300px
        color: Colors.teal,
       )

Note: the scaling process will work also in the same device in both in Portrait mode or in Landscape mode.

Text Size #

to set the text size.

    Text(
        'This is a Test Text',
        style: TextStyle(
           fontSize: response.setFontSize(24), //defined a fixed font size in pixels
           fontWeight: FontWeight.bold,
    ),
)

Getting Screen Width & Height #

    TextSpan(
      text: '\nScreen Height: ${response.screenHeight}px\n', //we are getting back our current device screen 
      //height in pixels.
      style: TextStyle(
        color: Colors.black,
        fontSize: response.setFontSize(18),
      ),
    ),
    TextSpan(
      text: 'Screen Width: ${response.screenWidth}px', //we are getting back our current device screen 
      //width in pixels.
      style: TextStyle(
        color: Colors.black,
        fontSize: response.setFontSize(18),
      ),
    ),

Contributions #

If you feel like you can contribute to make the package much better and more useful for other developers, don't hesitate to fork the repo and make pull request to your changes.

Source code on Github: here

Inspired #

This package was inspired by Prateek Sharma's great custom responsive UI project.

[0.1.1] - 2020-5-30 #

  • General Bug Fixes.
  • General Performance improvments.

[0.1.0] - 2020-5-17 #

  • General Bug Fixes.

[0.0.1+4] - 2020-5-9 #

  • General Bug Fixes.
  • General Performance Fixes.
  • Fix scaling problem with tablets.
  • Adding new MediaQuery related functions to decrease the developing time.
  • Adding new extension features to increase performance.

[0.0.1+3] - 2020-4-19 #

  • Bug Fixes

[0.0.1+2] - 2020-4-14 #

  • Bug Fixes
  • General Performance Fixes.

[0.0.1+1] - 2020-4-8 #

  • Bug Fixes

[0.0.1] - 2020-4-1 #

  • Simplified package initialization.
  • Added a more readable/meaningful methods names.
  • Adding a full documentation to all methods and classes.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //initializing Our Package to get data and process them from
    //the general context of the app
    //Both Child and Context is required to initialize the config process
    return Response(
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

//To use the [MediaQuery Functions]
class MyApp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //initializing Our Package to get data and process them from
    //the general context of the app
    //Both Child and Context is required to initialize the config process
    return MaterialApp(
      home: Response(
        child: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final response = ResponseUI.instance;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.teal,
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                //We are just want the SizedBox to be 30px in all situations and screens.
                //This helps you specifying a constant height in all modes and devices
                //that the app will work on.
                height: response.setHeight(30),
              ),
              Container(
                //We want the Container Widget to be 200px in width and 200px in height...
                //across all the available displays on which the app will work on.
                //Note: the scaling process will work also in the same device in both
                //in Portrait mode or in Landscape mode.
                width: response.setWidth(300),
                height: response.setHeight(200),
                color: Colors.teal,
                child: Center(
                  child: Text(
                    "Hello, World!",
                    style: TextStyle(
                      fontSize: response.setFontSize(45),
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: response.setHeight(20),
              ),
              Text(
                'This is a Test Text',
                style: TextStyle(
                  //we have defined a fixed font size in pixels
                  fontSize: response.setHeight(24),
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(
                height: response.setHeight(20),
              ),
              Text(
                'Testing new Feature',
                style: TextStyle(
                  //we have defined a fixed font size in pixels
                  fontSize: response.setFontSize(24),
                  fontWeight: FontWeight.bold,
                  color: Colors.teal,
                ),
              ),
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      //we are getting back our current device screen height in pixels.
                      text:
                          '\nScreen Height: ${response.screenHeight.floor()}px\n',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: response.setFontSize(18),
                      ),
                    ),
                    TextSpan(
                      //we are getting back our current device screen width in pixels.
                      text: 'Screen Width: ${response.screenWidth.floor()}px',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: response.setFontSize(18),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: response.setHeight(20)),
              Container(
                height: response.setHeight(50),
                width: response.setWidth(200),
                child: RaisedButton.icon(
                  color: Colors.teal,
                  onPressed: () {
                    //checking whether our current working device is in Portrait orientation or not.
                    print("isDevicePortrait: ${response.isDevicePortrait}");
                    //checking whether our current working device is in Portrait orientation as a Mobile Phone device
                    //(Not a Tablet) or not.
                    print("inMobilePortrait: ${response.inMobilePortrait}");
                    // print("screenPixelRatio: ${response.screenPixelRatio}");
                  },
                  icon: Icon(
                    Icons.info,
                    color: Colors.white,
                    size: response.setHeight(20),
                  ),
                  label: Text(
                    'Orientation State',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.normal,
                      fontSize: response.setFontSize(18),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  response: ^0.1.1

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

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

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [response] that is in a package requiring null.

Health suggestions

Fix lib/response.dart. (-0.50 points)

Analysis of lib/response.dart reported 1 hint:

line 115 col 17: The value of the field '_originalHeight' isn't used.

Dependencies

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