responsive_widgets 1.0.2

Responsive Widgets #

pub package

This plugin helps to create responsive widgets, that makes auto-size with the proportion between reference screen size (width, height and shortest side(dpi)) with the screen that the app is running. The package only changed the original widgets, like "Container" to apply a function that make this calculation.

Features #

Feature / Working withProgress
Android
iOS
Smartphones
5.5 inch screens
Vertical mode
Horizontal mode
Tablet
Tablet on vertical mode
Tablet on horizontal mode
Support for web

Getting Started #

First of all you need to use the code ResponsiveWidgets.init(context) to make the plugin works. Use ResponsiveWidgets.builder(child: ), to recalculate the proportion every time the sizes of device changes. Inclusive when the device turned to left/right... The code need to be placed on the first screen of the app, inside of the build method, like this: See also in code

class  _HomeScreenState  extends  State<HomeScreen> {
    @override
    Widget  build(BuildContext context) {
    
	    ResponsiveWidgets.init(context,
		    referenceHeight: 1920, // Optional
		    referenceWidth: 1080, // Optional
		    referenceShortestSide: 411 // Optional,
	    );
	    
	    return  ResponsiveWidgets.builder(
	        child: Scaffold(
                    body: Container()
                ),
	    );
	}
}

ShortestSide is basically the dpi of the device, can be got by this code: MediaQuery.of(context).size.shortestSide; Or be changed in the device in Config>Developer Options>Drawing Section>ShortestSide.

Widgets #

ContainerResponsive #

ContainerResponsive(
    child: Widget,
    height: double, // Responsive wight
    heightResponsive: bool, // Enable/Disable Responsive height
    width: double, // Responsive width
    widthResponsive: , bool// Enable/Disable Responsive width
)

EdgeInsetsResponsive (Can be used in any widget with parameter padding) #

Padding(
    child: Widget,
    padding: EdgeInsetsResponsive.all(50), // EdgeInsets Responsive padding
)

IconResponsive #

IconResponsive(
    icon,
    size: double, // Responsive size
)

IconButtonResponsive #

IconButtonResponsive(
    icon: IconData,
	size: double, // Responsive size,
	onTap: (){}   
)

TextResponsive #

TextResponsive(
    text // Responsive fontSize
)

RaisedButtonResponsive #

RaisedButtonResponsive(
    child: Widget,
    onPressed: (){}
)

Function to recalculate size responsibly #

Have special cases that doesn't have Responsive Widgets created, one of this cases is the Positioned, to solve this problem is simple use this function: ResponsiveWidgets().getSize(double size) that will return the correct value to the screen.

Examples #

Mixed, responsive and normal, respectively #

Mixed, responsive and normal, respectively

Not responsive page #

Not responsive page

Responsive page #

Responsive page

1.0.2 #

  • Fixed to run only with context as argument to init.

1.0.1 #

  • Added support for Tablet, horizontal mode, and for web.
  • To works the new functionalities is necessary to use ResponsiveWidgets.builder(child: ), to recalculate the proportion every time the sizes of device changes. Inclusive when the device turned to left/right...
  • ResponsiveWidgets().init(context) changed to ResponsiveWidgets.init(context)
  • Changed type of Flutter project from plugin to package.

(Breaking changes)

0.1.10 #

  • Added assert if the plugin is used without init

0.1.9 #

  • Changed to static methods on main class

0.1.8 #

  • Keys is now Working
  • Classes code reformated

0.1.7 #

  • Updated Kotlin and Gradle

0.1.6 #

  • Updated packages

0.1.5 #

  • Ios fixed.

0.1.4 #

  • Readme updated.
  • Repository url fixed.

0.1.3 #

  • Readme updated.

0.1.2 #

  • Readme updated.
  • Changed getSizeByDp() to getSize().

0.1.1 #

  • Changed description.

0.1.0 #

  • This plugin helps to create responsive widgets, that makes a auto-size with the proportion between reference Screen Size and the screen that the app is running. The package only changed the original widgets, like "Container" to apply a function that make this calculation.

example/README.md

example #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  responsive_widgets: ^1.0.2

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

We analyzed this package on Feb 24, 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.7

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 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test