k_responsive

Description:

k responsive

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,
}
copied to clipboard
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(),
);
},
);
copied to clipboard

auto resonsive

Container(
height:20.hSafe or 20.h,
width: 20.w,
child:Texxt('123',style:TextStyle(
fontSize: 12.fSafe or 12.f
))
);
copied to clipboard


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)
copied to clipboard


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),
);
copied to clipboard