responsive widgets
this plugin helps to create responsive widgets, that makes a auto-size with the proportion between reference screen size (width, height and shortest side(dpi)) with the screen that the app is running. the package only changed the original widgets, like “container” to apply a function that make this calculation.
getting started
first of all you need to use the code responsivewidgets().init(context)
to make the plugin works. the code need to be placed on the first screen of the app, inside of the build method, like this: see also in code
class _homescreenstate extends state<homescreen> {
@override
widget build(buildcontext context) {
responsivewidgets().init(context,
referenceheight: 1920, // optional
referencewidth: 1080, // optional
referenceshortestside: 411 // optional, default = 360
);
return scaffold(
body: container()
);
}
}
shortestside is basically the dpi of the device, can be got by this code: mediaquery.of(context).size.shortestside;
or be changed in the device in config>developer options>drawing section>shortestside.
widgets
containerresponsive
containerresponsive(
child: widget,
height: double, // responsive wight
heightresponsive: bool, // enable/disable responsive height
width: double, // responsive width
widthresponsive: , bool// enable/disable responsive width
)
edgeinsetsresponsive (can be used in any widget with parameter padding)
padding(
child: widget,
padding: edgeinsetsresponsive.all(50), // edgeinsets responsive padding
)
iconresponsive
iconresponsive(
icon,
size: double, // responsive size
)
iconbuttonresponsive
iconbuttonresponsive(
icon: icondata,
size: double, // responsive size,
ontap: (){}
)
textresponsive
textresponsive(
text // responsive fontsize
)
raisedbuttonresponsive
raisedbuttonresponsive(
child: widget,
onpressed: (){}
)
function to recalculate size responsibly
have special cases that doesn’t have responsive widgets created, one of this cases is the positioned, to solve this problem is simple use this function: responsivewidgets().getsize(double size)
that will return the correct value to the screen.
examples
mixed, responsive and normal, respectively
not responsive page
responsive page
Comments are closed.