Layoutry
Installing
See the official installing guidline from layoutry/install
Usage & Overview
Layoutry is a modified implementation of the LayoutBuilder, so that we can use its LayoutInfo to easily catch the device’s type via its screen size.
Where the LayoutDevice is a custom Platform.operatingSystem implementation enum, which used to mark current device’s type by screen size.
Here is the code:
Layoutry(
builder: (context, info) {
// A manual defined layout-device to color map.
final colors = <LayoutDevice, Color>{
LayoutDevice.mobile: Colors.blue,
LayoutDevice.tablet: Colors.red,
LayoutDevice.web: Colors.green,
};
return AnimatedContainer(
duration: const Duration(milliseconds: 500),
// color will be generated from [colors],
// by listening to device's screen size.
color: colors[info.device],
child: Center(child: Builder(builder: (context) {
// If the device's screen size is like mobile:
// "Hi Mobile" will written in the screen.
if (info.device.isMobile()) {
return const Text(
'Hi Mobile',
style: TextStyle(color: Colors.white, fontSize: 20),
);
}
// If the device's screen size is like web:
// "Hi Web" will written in the screen.
if (info.device.isWeb()) {
return const Text(
'Hi Web',
style: TextStyle(color: Colors.white, fontSize: 20),
);
}
// In other cases: Hi current device's screen size
// appropriate device type will be written in the screen.
return Text(
'Hi ${info.device.toString()}',
style: const TextStyle(color: Colors.white, fontSize: 20),
);
})),
);
},
)
Comments are closed.