responsive_ui 2.0.1

Flutter Android iOS web

resposive_ui Flutter package helps you to create a responsive and Nested responsive widget. Works on android, iOs, Web with both portrait and landscape mode.

Responsive UI #

Pub

responsive_ui package helps you to create a responsive widget and Nested responsive widgets. Works on Android,iOS, Web with both Portrait and LandScape mode.

Getting Started #

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

    Responsive(
        children: <Widget>[
            Div(
                colS: 5,
                offsetL: 2,
                child: Card(child: Icon(Icons.game))
            ),
            Div(
                colS: 12,
                colM: 6,
                colL: 4,
                child: Text('responsive ui')
            )          
        ]
    )
WEB EXAMPLE

https://bharathraj-e.github.io/responsive_ui_example/ Have a look! #

SCREENS

  • colS | mobiles ( <= 600px )

  • colM | tablets ( 600px - 990px )

  • colL | laptops ( > 990px )

Widgets #

The Responsive UI Package contains two simple widgets.

  1. Div()
  2. Responsive()

1. Div() #

Div() intakes child & column sizes.

Arguments

Argumentsinputsif null / default to
childWidgetnot null / required
colS(int) 0-1212
colM(int) 0-12ColS value
colL(int) 0-12ColM value
offsetS(int) 0-120
offsetM(int) 0-120
offsetL(int) 0-120

(S = small, M = medium, L = large) #

  • 0 - 0.0 width (gone) (replaced with SizedBox.shrink())

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

  • Parent widget should not be a horizontal scroll type widget

  • To offset, simply add offsetS / offsetM / offsetL to the Div() widget with colS / colM / colL respectively.

2. Responsive() #

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

Arguments

Argumentsinputsif null / default
childrenListnot null / required / empty[]
alignmentWrapAlignmentWrapAlignment.start
runAlignmentWrapAlignmentWrapAlignment.start
crossAxisAlignmentWrapCrossAlignmentWrapCrossAlignment.start
runSpacingdouble0.0

Note #

  • Div() works with vertical scroll not inhorizontal scroll, as it calculations are base on width only.

  • Div() works as expected when it placed as a direct child of Responsive() widget's children.

  • Sum of the offset and the respective col should be <= to 12

NESTED RESPONSIVE

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

The nested Responsive() widget takes the width provided by parent Div() widget and not the screen width

sample #

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

17
likes
100
pub points
71%
popularity

resposive_ui Flutter package helps you to create a responsive and Nested responsive widget. Works on android, iOs, Web with both portrait and landscape mode.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

ebraj1996@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on responsive_ui