🌐 Flutter Responsive Builder Kit #

🚀 responsive_builder_kit #

A lightweight Flutter package for building responsive UI layouts using breakpoints and screen type helpers.

🧩 Usage #

1️⃣ Add library to your pubspec.yaml #

dependencies:
  responsive_builder_kit: ^latest_version

2️⃣ Import library in dart file #

import 'package:responsive_builder_kit/responsive_builder_kit.dart';

3️⃣ Wrap your app widget #

MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flutter Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    ),
    home: ResponsiveScreenBuilder.builder(
      desktop: (BuildContext context) => HomePage(title: "Responsive Layout Builder"),
      tablet: (BuildContext context) => Container(color:Colors.yellow),
      mobile: (BuildContext context) => OrientationLayoutBuilder(
        portrait: (context) => Container(color:Colors.blue),
        landscape: (context) => Container(color:Colors.black),
      ),
      watch: (BuildContext context) => Container(color:Colors.purple),
    )
);

🔧 Called by breakpoints #

MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flutter Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    ),
    home: ResponsiveScreenBuilder.builder(
      breakpoints: ScreenBreakpoints(desktop: 900, tablet: 650, mobile: 650, watch: 250),
      desktop: (BuildContext context) => HomePage(title: "Responsive Layout Builder"),
      tablet: (BuildContext context) => Container(color:Colors.yellow),
      mobile: (BuildContext context) => OrientationLayoutBuilder(
        portrait: (context) => Container(color:Colors.blue),
        landscape: (context) => Container(color:Colors.black),
      ),
      watch: (BuildContext context) => Container(color:Colors.purple),
    )
);

🧠 Conditional statements #

✅ Without breakpoint #

if(ResponsiveLayoutHelper.isDesktop(context)) {
  print("Desktop mode");
} else if(ResponsiveLayoutHelper.isTablet(context)) {
  print("Tablet mode");
} else if(ResponsiveLayoutHelper.isMobile(context)) {
  print("Mobile mode");
} else if(ResponsiveLayoutHelper.isWatch(context)) {
  print("Watch mode");
}

✅ With breakpoint #

if(ResponsiveLayoutHelper.isDesktop(context, minWidth: 900)) {
  debugPrint("Desktop mode 2");
} else if(ResponsiveLayoutHelper.isTablet(context, minWidth: 650, maxWidth: 900)) {
  debugPrint("Tablet mode 2");
} else if(ResponsiveLayoutHelper.isMobile(context, minWidth: 250, maxWidth: 650)) {
  debugPrint("Mobile mode 2");
} else if(ResponsiveLayoutHelper.isWatch(context, maxWidth: 250)) {
  debugPrint("Watch mode 2");
}

🔥 Use Responsive class #

Responsive.init(context: context);

if(Responsive.isDesktopExtraLarge(context)) {
  debugPrint("Extra large screen mode");
} else if(Responsive.isDesktop(context)) {
  debugPrint("Desktop screen mode");
} else if(Responsive.isTablet(context)) {
  debugPrint("Tablet screen mode");
} else if(Responsive.isMobileLarge(context)) {
  debugPrint("Large mobile screen mode");
} else if(Responsive.isMobile(context)) {
  debugPrint("Mobile screen mode");
} else if(Responsive.isWatch(context)) {
  debugPrint("Watch screen mode");
}

🧠 With breakpoint #

Responsive.init(
  context: context,
  breakpoints: DeviceBreakpoints(
    desktop: DeviceBreakpointRange(min: 900, max: double.infinity),
    tablet: DeviceBreakpointRange(min: 650, max: 900),
    mobile: DeviceBreakpointRange(min: 250, max: 650),
    watch: DeviceBreakpointRange(min: 0, max: 250),
  ),
);

if(Responsive.isDesktopExtraLarge(context)) {
  debugPrint("Extra large screen mode");
} else if(Responsive.isDesktop(context)) {
  debugPrint("Desktop screen mode");
} else if(Responsive.isTablet(context)) {
  debugPrint("Tablet screen mode");
} else if(Responsive.isMobileLarge(context)) {
  debugPrint("Large mobile screen mode");
} else if(Responsive.isMobile(context)) {
  debugPrint("Mobile screen mode");
} else if(Responsive.isWatch(context)) {
  debugPrint("Watch screen mode");
}

🔥 Use Responsive class #

Responsive.init(
  context: context,
  breakpoints: DeviceBreakpoints(
    desktop: DeviceBreakpointRange(min: 900, max: double.infinity),
    tablet: DeviceBreakpointRange(min: 650, max: 900),
    mobile: DeviceBreakpointRange(min: 250, max: 650),
    watch: DeviceBreakpointRange(min: 0, max: 250),
  ),
);

if(Responsive.isDesktopExtraLarge(context)) {
  debugPrint("Extra large screen mode");
} else if(Responsive.isDesktop(context)) {
  debugPrint("Desktop screen mode");
} else if(Responsive.isTablet(context)) {
  debugPrint("Tablet screen mode");
} else if(Responsive.isMobileLarge(context)) {
  debugPrint("Large mobile screen mode");
} else if(Responsive.isMobile(context)) {
  debugPrint("Mobile screen mode");
} else if(Responsive.isWatch(context)) {
  debugPrint("Watch screen mode");
}

🛠️ Maintained by #

Rz Rasel
Flutter • Responsive Builder Kit • Responsive UI

📦 Publish in Pub Dev #

flutter pub publish --dry-run
flutter pub publish