responsive_ui 1.1.0+1

  • Readme
  • Changelog
  • Example
  • Installing
  • new68

Responsive UI #

Pub

responsive_ui package helps you to create a responsive widget and Nested responsive widget too. Works on all flutter platform (android, iOs ,web ) with both Portrait and LandScape mode.

sample video #

https://youtu.be/2koIFANjJZg

Watch the video

Getting Started #

It works as same as Bootstrap Row Column method, Splitting screen into 12 columns and placing widget by combining column based on screen size.

Screens #

For mobiles ( screen size <= 600px wide ) #

For tablets ( screen size > 600px wide && <= 990 px wide ) #

For laptops ( screen size > 990px wide ) #

Widgets #

The Responsive UI Package contains two simple widgets.

  1. Responsive()
  2. ResponsiveChild()

(s = small, m = medium, l = large)

1. Responsive() #

Responsive intakes List<ResponsiveChild> with default column/screen size for each widget can be declared.

    Responsive(
        defaultColS : 12,//default column size for Small screen 12
        defaultColM : 6, //default column size for Medium screen 12
        defaultColL : 4, //default column size for Large screen 12
        children:<Widget>[
          ResponsiveChild(
            child:Container(
                    color: Colors.amber,
                    alignment: Alignment.center,
                    child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('child 1'),
                    ),
                  ),
          ),
          ResponsiveChild(
            child:Container(
                    color: Colors.blue,
                    alignment: Alignment.center,
                    child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('child 2'),
                    ),
                  ),
          ),
        ]
    )    

defaultColS, defaultColM, defaultColL default to 12 & various from [0-12]

0 - 0.0 width (gone)

12 - full width (provided by parent widget not screen width)

2. ResponsiveChild() #

To Override the defaultCol size use ResponsiveChild() col value.

ResponsiveChild() intakes child & column sizes.

Offset #

To offset, simply add offsetS /offsetM /offsetL to the ResponsiveChild() widget with respective size.

Lite Example #

    Responsive(
        defaultColS : 12, //defaults to 12
        defaultColM : 6, //defaults to 12
        defaultColL : 4, //defaults to 12
        children:<Widget>[
          ResponsiveChild(           
            colS: 10,  // colS & ColL override the defaultCol size
            colL: 3,
            offsetS :2 // added offset 
            child:  Container(
              color: Colors.amber,
              alignment: Alignment.center,
              child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('child 1'),
              ),
            ),
          ),
          ResponsiveChild(           // as colM not mentioned, it takes the defaulColM size
            colS: 10, 
            colL: 3,
            child: Container(
            alignment: Alignment.center,
            color: Colors.redAccent,
                child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('Column Child'),
                ),
            ),
          ),
        ]
    )    

ResponsiveChild() works only as direct child of Responsive() widget #

Nested Responsive #

Placing a Responsive() widget into a Responsive().

The child Responsive() widget takes a width provided by Parent Responsive() widget and not the screen width

Complete Example #

class ResponsiveExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[350],
        appBar: AppBar(
          title: Text('Responsive Example'),
          centerTitle: true,
        ),
        body: Container(
          color: Colors.pink,
          width: MediaQuery.of(context).size.width,
          padding: EdgeInsets.all(10),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Responsive(
                  defaultColS: 12,
                  defaultColM: 6,
                  defaultColL: 3,
                  children: <ResponsiveChild>[
                    ResponsiveChild(
                      child: Card(
                        color: Colors.amber,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('S12 M6 L3'),
                        ),
                      ),
                    ),
                    ResponsiveChild(
                      child: Card(
                        color: Colors.blue,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('S12 M6 L3'),
                        ),
                      ),
                    ),
                    ResponsiveChild(
                      child: Card(
                        color: Colors.grey,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('S12 M6 L3'),
                        ),
                      ),
                    ),
                    ResponsiveChild(
                      child: Card(
                        child: Container(
                            padding: EdgeInsets.all(10),
                            color: Colors.orangeAccent,
                            child: Column(
                              children: <Widget>[
                                Responsive(
                                  // nested Col12 widget
                                  defaultColS: 4,
                                  defaultColM: 4,
                                  defaultColL: 4,
                                  children: <ResponsiveChild>[
                                    ResponsiveChild(
                                      child: Card(
                                        color: Colors.white,
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text('S4 M4 L4 Nested'),
                                        ),
                                      ),
                                    ),
                                    ResponsiveChild(
                                      child: Card(
                                        color: Colors.lime,
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text('S4 M4 L4 Nested'),
                                        ),
                                      ),
                                    ),
                                    ResponsiveChild(
                                      child: Card(
                                        color: Colors.indigo,
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text('S4 M4 L4 Nested'),
                                        ),
                                      ),
                                    ),
                                    ResponsiveChild(
                                      colS: 12,
                                      colM: 12,
                                      colL: 12,
                                      child: Card(
                                        color: Colors.redAccent,
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text('S12 M7 L12 Nested'),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child:
                                      Text('S12 M6 L3 (Nested Responsive Row)'),
                                )
                              ],
                            )),
                      ),
                    ),
                    ResponsiveChild(
                      colL: 4,
                      colS: 2,
                      colM: 5,
                      offsetS: 4,
                      offsetM: 1,
                      offsetL: 2,
                      child: Card(
                        color: Colors.cyan,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('S2 M5 L4 \noffset S4 M1 L2 '),
                        ),
                      ),
                    ),
                    ResponsiveChild(
                      colL: 2,
                      colS: 2,
                      colM: 2,
                      child: Card(
                        color: Colors.deepPurpleAccent,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('S2 M2 L2'),
                        ),
                      ),
                    ),
                    ResponsiveChild(
                      colL: 4,
                      colS: 4,
                      colM: 4,
                      child: Card(
                        color: Colors.cyanAccent,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('S4 M4 L4'),
                        ),
                      ),
                    ),
                    ResponsiveChild(
                      child: Card(
                        color: Colors.green,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('S12 M6 L3'),
                        ),
                      ),
                    ),
                    ResponsiveChild(
                      child: Card(
                        color: Colors.deepPurple,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('S12 M6 L3'),
                        ),
                      ),
                    ),
                  ]),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Responsive'),
              )
            ],
          ),
        ));
  }
}

responsive_ui is made simply using Wrap() and LayoutBuilder() with a bits of logics.

[1.1.0+1] - 2020-01-18

  • ResponsiveRow() changed back to Responsive()
  • ResponsiveColumn() changed to ResponsiveChild()
  • Added offset
  • Added a sample video link

[1.1.0] - 2020-01-15

  • Responsive() changed to ResponsiveRow()
  • Col() changed to ResponsiveColumn()
  • readme && images updated

[1.0.0] - 2020-01-06

  • stable release of responsive_ui

example/README.md

Responsive UI #

responsive_ui package helps you to create a responsive widget and Nested responsive widget too. Works on all flutter platform (android, iOs ,web ) with both Portrait and LandScape mode.

sample video #

https://youtu.be/2koIFANjJZg

Watch the video

Lite Example #

    Responsive(
        defaultColS: 12, //defaults to 12
        defaultColM: 6, //defaults to 12
        defaultColL: 4, //defaults to 12
        children: <ResponsiveChild>[
          ResponsiveChild(
            child: Container(
              color: Colors.amber,
              alignment: Alignment.center,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('child 1'),
              ),
            ),
          ),
          ResponsiveChild(
            // as colM not mentioned, it takes the defaulColM size
            colS: 10, // colS & ColL override the defaultCol size
            colL: 3,
            child: Container(
              alignment: Alignment.center,
              color: Colors.redAccent,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('ResponsiveColumn Child'),
              ),
            ),
          ),
          ResponsiveChild(
            child: Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('child 2'),
              ),
            ),
          ),
          ResponsiveChild(
            child: Responsive(   //nested Responsive()
                defaultColS: 12, //column size for Small screen
                defaultColM: 6, //column size for Medium screen
                defaultColL: 4, //column size for Large screen
                children: <ResponsiveChild>[
                  ResponsiveChild(
                    child: Container(
                      color: Colors.amber,
                      alignment: Alignment.center,
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('child 1'),
                      ),
                    ),
                  ),
                  ResponsiveChild(
                    child: Container(
                      color: Colors.blue,
                      alignment: Alignment.center,
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('child 2'),
                      ),
                    ),
                  ),
                ]),
          )
        ]);    

Use this package as a library

1. Depend on it

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


dependencies:
  responsive_ui: ^1.1.0+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:responsive_ui/responsive_ui.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
35
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]
68
Learn more about scoring.

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

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

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