A Flutter Widget for building responsive UI.


  • Responsive(): Define three types of widgets which are automatically chosen based on the screen width.
  • Responsive.builder(): Define builder methods to build the widgets.
  • Responsive.withShared<T>(): Define are shared child which can be any type and will be shared between all the layouts.
  • Responsive.value<T>(): Define a simple value which is responsively chosen.
  • To customize the layout behavior, you may override the upperBound and/or lowerBound static properties as well as the isMobile, isDesktop and isTablet static methods.

Getting started

  • Import the package: import 'package:res_builder/responsive.dart;


import 'package:res_builder/responsive.dart';


      title: '''
          Responsive Demo on 
        context: context,
        onMobile: 'Mobile',
        onTablet: 'Tablet',
        onDesktop: 'Desktop',
      home: Scaffold(
        body: Responsive.withShared<List<Widget>>(
          share: [
            const Text("Responsive Layout"),
              onMobile: const Text("Im inside of a Column"),
              onDesktop: const Text("Im inside of a Row"),
          onMobile: (context, children) => Column(
            children: children,
          onDesktop: (context, children) => Row(
            children: children,

Additional information

Don't hesitate to contact me if you have questions or ideas.