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 #
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') ) ] )
https://bharathraj-e.github.io/responsive_ui_example/ Have a look! #
colS | mobiles ( <= 600px )
colM | tablets ( 600px - 990px )
colL | laptops ( > 990px )
The Responsive UI Package contains two simple widgets.
1. Div() #
Div() intakes child & column sizes.
|Arguments||inputs||if null / default to|
|Widget||not null / required|
(S = small, M = medium, L = large) #
0 - 0.0 width (gone) (replaced with
12 - full width (provided by
parent widgetnot screen width)
Parent widgetshould not be a
horizontal scrolltype widget
To offset, simply add
offsetLto the Div() widget with
2. Responsive() #
List<Div> with default column/screen size for each widget can be declared.
|Arguments||inputs||if null / default|
|List||not null / required / empty|
vertical scrollnot in
horizontal scroll, as it calculations are base on width only.
Div()works as expected when it placed as a direct child of
Sum of the
offsetand the respective
colshould be <= to
Responsive() widget into a
Responsive() widget takes the width provided by parent
Div() widget and not the screen width
responsive_ui is made simply using Wrap() and LayoutBuilder() with a bits of logics.