fluid layout
fluid layouts allows you to create responsive layout for mobile, web and desktop from a single codebase.
let’s get started
install it
follow the installation process here
understand fluid layout
fluid layout aims to help building a responsive experience through all the different screen sizes.
based in the boostrap approach, fluidlayout
calculates a padding content (fluid_padding) that changes depending on the parent size. the fluid
widget uses that padding to set its size
the screen sizes are divided in 6 breakpoints: xs, s, m, l, xl, and can be accessed through fluidlayout.of(context).fluidbreakpoint
or context.breakpoint
.
you can create values(int, num, objects, functions, … whatever variable type) for diferrent screen sizes thanks to the class fluidvalue
. the easiest way is:
final value = context.fluid(defaultvalue,
xs: xsvalue, //if null xs would be defaultvalue
s: svalue, //if null s would be defaultvalue
m: mvalue, //if null m would be defaultvalue
l: lvalue, //if null l would be defaultvalue
xl: xlvalue //if null xl would be defaultvalue
)
examples
fluidlayout & fluid
see web example
class basicfluidlayout extends statelesswidget {
@override
widget build(buildcontext context) {
return scaffold(
backgroundcolor: colors.grey[200],
body: container(
child: fluidlayout(
child: fluid(
child: container(
color: colors.blue,
child: center(
child: text(
'fluid width',
style: textstyle(color: colors.white),
),
),
),
),
),
),
);
}
}
there is a fixed horizontalpadding
param that can be changed to all the fluidlayout
or just for a fluid
container
for customscrollview
there is a sliverfluid
equivalent to fluid
fluidgridview
fluidgridview(
children: list.filled(
100,
fluidcell.withfluidheight(
size: context.fluid(3, m: 3, s: 4, xs: 6),
heightsize: context.fluid(3, m: 3, s: 4, xs: 6),
child: customcard(
color: colors.red,
child: center(child: text('item')),
)),
),
)
customizable params [double spacing
, scrollphysics physics
, bool shrinkwrap
] and bool fluid
fluidcell
has three methods to build the cell:
fluidcell.fit({size, child})
fluidcell.withfluidheight({size, heightsize, child})
fluidcell.withfixedheight({size, height, child})
for customscrollview
there is a sliverfluidgrid
equivalent to fluidgridview
conditional layout
see conditional layout web example
if(fluidlayout.of(context).fluidbreakpoint.islargerthanm)
return container(color: colors.red)
else
return container(color: colors.red)
remember you can use context.breakpoint
as fluidlayout.of(context).fluidbreakpoint
combine full width widgets with fluid layouts
fluid layouts can be built everywhere inside the app and they will calculate their constraints based on their parents sizes, also they can combine very easily in cases we need full screen widgets.
Comments are closed.