Flutter Responsive Builder Kit #

responsive_builder_kit #

Usage #

1. Add library to your pubspec.yaml #

latest version:

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

4. 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");
}

• Use Responsive class:

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

• With breakpoint

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

• Use Responsive class:

if(Responsive.isExtraLargeScreen(context, minWidth: 3840)) {
  print("Extra large screen mode");
} else if(Responsive.isDesktop(context, minWidth: 900)) {
  print("Desktop screen mode");
} else if(Responsive.isTablet(context, maxWidth: 900)) {
  print("Tablet screen mode");
} else if(Responsive.isLargeMobile(context, maxWidth: 650)) {
  print("Large mobile screen mode");
} else if(Responsive.isMobile(context, maxWidth: 500)) {
  print("Mobile screen mode");
} else if(Responsive.isWatch(context, maxWidth: 250)) {
  print("Watch screen mode");
}

Publish in Pub Dev #

flutter pub publish --dry-run
flutter pub publish