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),
    );

Libraries

k_responsive