GitLocker: The Coding Marketplace

Description:

responsive ui

Responsive UI #

responsive_ui package helps you to create a responsive widget and Nested responsive widgets. Works on all Platforms.
Getting Started #
Live demo : https://bharathraj-e.github.io/responsive_ui/ Have a look! #
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(
division:Division(
colS: 5,
offsetL: 2,
),
child: Card(child: Icon(Icons.game))
),
Div(
division:Division(
colS: 12,
colM: 6,
colL: 4,
),
child: Text('responsive ui')
)
]
)
copied to clipboard
Widgets #
The Responsive UI Package contains two simple widgets.

Div()
Responsive()

1. Div() #

Arguments
inputs
if null / default to

child
Widget
required

division
Division
if null defaluts to Division()

Divison() intakes column sizes and offSets.

Arguments
inputs
if null / default to

colXS
(int) 0-12
12

colS
(int) 0-12
colXS value

colM
(int) 0-12
ColS value

colL
(int) 0-12
ColM value

colXL
(int) 0-12
ColL value

offsetXS
(int) 0-12
0

offsetS
(int) 0-12
0

offsetM
(int) 0-12
0

offsetL
(int) 0-12
0

offsetXL
(int) 0-12
0

(XS = Extra Small, S = small, M = medium, L = large, XL = Extra 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.

Offset works for their respective column sizes.

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

Arguments
inputs
if null / default

children
List
not null / required / empty[]

alignment
WrapAlignment
WrapAlignment.start

runAlignment
WrapAlignment
WrapAlignment.start

crossAxisAlignment
WrapCrossAlignment
WrapCrossAlignment.start

runSpacing
double
0.0

Note #

Responsive widget is a Wrap widget.

Responsive & Div() widget need Finite width to work.

Div() works with vertical scroll not in horizontal 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 #
Place a Responsive() widget into a Div().
The nested Responsive() widget takes the width provided by parent Div() widget and not the screen width
sample #

Screen Types #

Type
Default Size

Xtra small
< 375.0

Small
375.0 - 596.0

Medium
596.0 - 897.0

Large
897.0 - 1232.0

Xtra Large
>1232.0

Override / Set your default size #
Yes, now you can set your own breakpoints, that applies to all the Responsive & Div widgets.
void main() {
// sample 1
Responsive.setGlobalBreakPoints(400.0, 600.0, 997.0, 1380.0);
// Sample 2
Responsive.setGlobalBreakPoints(0, 596.0, 897.0, 1232.0);
// Since the first value is 0 : colXS is always neglected
runApp(const MyApp());
}

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