K_RESPONSIVE
- Device Type
enum DeviceType {
/// 720 < [tablet] <= 1024
tablet,
/// something else
web,
/// 480 < [phoneLarge] <= 720
phoneLarge,
/// 320 < [phoneMedium] <= 480
phoneMedium,
/// [phoneSmall] <= 320
phoneSmall,
/// [watch] format default <= 200
watch,
}
Usage
- Update design size or contraints of device
return MaterialApp(
builder: (ctx, child) {
return KResponsiveBuilder(
designSize: Size(375, 708),
responsive: KResponsiveObject(
tablet: 1024,
phoneMedium: 480,
watch: 200,
phoneSmall: 320,
phoneLarge: 720,
),
child: Home(),
);
},
);
- auto resonsive
Container(
height:20.hSafe or 20.h,
width: 20.w,
child:Texxt('123',style:TextStyle(
fontSize: 12.fSafe or 12.f
))
);
-
Use without BuildContext
- Use when Updated BuildContext
- Use when without Widget
-
Note: If BuildContext's null then BuildContext is required else don't need
KResponsive.responsive<T>(
context:context,
phoneLarge: 64.0,
phoneMedium: 48.0,
phoneSmall: 32.0,
tablet: 500.0,
watch: 24.0,
web: 160.0)
-
Responsive Widget
- use it if you need responsive a Widget
KResponsive.widgetBuilder(
phoneLarge: Container(width: 50, height: 50, color: Colors.yellow),
phoneMedium: Container(width: 50, height: 50, color: Colors.amber),
phoneSmall: Container(width: 50, height: 50, color: Colors.cyan),
tablet: Container(width: 50, height: 50, color: Colors.green),
watch: Container(width: 50, height: 50, color: Colors.pink),
web: Container(width: 50, height: 50, color: Colors.blue),
);