Responsive UI Development with Responsive Builder Package for Flutter

Published on by Flutter News Hub

Responsive UI Development with Responsive Builder Package for Flutter

Building responsive UIs in Flutter can be a challenge, but the responsive builder package simplifies this process. This package provides a set of widgets that allow you to create responsive layouts that adapt to different screen sizes and orientations.

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  responsive_builder: ^latest_version

Usage

The main widget provided by this package is the ResponsiveBuilder. This widget takes a builder function as its argument, which returns the UI to be displayed. The builder function takes a SizingInformation object as its argument, which contains information about the current screen size and orientation.

Here's an example of how to use the ResponsiveBuilder to create a simple responsive UI:

ResponsiveBuilder(
  builder: (context, sizingInformation) {
    if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) {
      return Container(color: Colors.blue);
    } else if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) {
      return Container(color: Colors.red);
    } else if (sizingInformation.deviceScreenType == DeviceScreenType.watch) {
      return Container(color: Colors.yellow);
    }
    return Container(color: Colors.purple);
  },
)

This code will return a different colored container depending on the device it's being displayed on.

Orientation Layout Builder

The OrientationLayoutBuilder widget allows you to create UIs that differ depending on the orientation of the device. This widget takes a builder function as its argument, which returns the UI to be displayed for each orientation.

Here's an example of how to use the OrientationLayoutBuilder to create a simple UI that changes depending on the orientation:

OrientationLayoutBuilder(
  portrait: (context) => Container(color: Colors.green),
  landscape: (context) => Container(color: Colors.pink),
)

This code will return a green container when the device is in portrait orientation and a pink container when the device is in landscape orientation.

Screen Type Layout

The ScreenTypeLayout widget allows you to create UIs that differ depending on the screen type of the device. This widget takes a builder function as its argument, which returns the UI to be displayed for each screen type.

Here's an example of how to use the ScreenTypeLayout to create a simple UI that changes depending on the screen type:

ScreenTypeLayout(
  mobile: Container(color: Colors.blue),
  tablet: Container(color: Colors.yellow),
  desktop: Container(color: Colors.red),
  watch: Container(color: Colors.purple),
)

This code will return a blue container when the device is a mobile phone, a yellow container when the device is a tablet, a red container when the device is a desktop computer, and a purple container when the device is a smartwatch.

Custom Screen Breakpoints

By default, the ResponsiveBuilder, OrientationLayoutBuilder, and ScreenTypeLayout widgets use the following screen breakpoints:

mobile: 0px - 599px (inclusive)
tablet: 600px - 959px (inclusive)
desktop: 960px - 1919px (inclusive)
watch: 0px - 599px (inclusive)

You can override these breakpoints by passing a breakpoints argument to the widget. For example, to use the following custom breakpoints:

mobile: 0px - 479px (inclusive)
tablet: 480px - 799px (inclusive)
desktop: 800px - 1279px (inclusive)
watch: 0px - 599px (inclusive)

You would pass the following breakpoints argument to the widget:

breakpoints: ScreenBreakpoints(
  mobile: 479,
  tablet: 799,
  desktop: 1279,
  watch: 599,
),

Global Screen Breakpoints

You can also set global screen breakpoints for all ResponsiveBuilder, OrientationLayoutBuilder, and ScreenTypeLayout widgets in your app by calling the following method before the app starts:

ResponsiveSizingConfig.instance.setCustomBreakpoints(
  ScreenBreakpoints(
    mobile: 479,
    tablet: 799,
    desktop: 1279,
    watch: 599,
  ),
);

This will set the breakpoints for all ResponsiveBuilder, OrientationLayoutBuilder, and ScreenTypeLayout widgets in your app, regardless of whether they specify their own breakpoints argument.

Screen Type Specific Values

The getValueForScreenType function can be used to get a specific value for the current screen type. This function takes three arguments:

  • context: The context of the widget that is using the getValueForScreenType function.
  • mobile: The value to return if the current screen type is mobile.
  • tablet: The value to return if the current screen type is tablet.
  • desktop: The value to return if the current screen type is desktop.

For example, the following code uses the getValueForScreenType function to get a different padding value for each screen type:

EdgeInsets.all(
  getValueForScreenType(
    context: context,
    mobile: 10,
    tablet: 30,
    desktop: 60,
  ),
)

This code will return a padding value of 10 for mobile devices, 30 for tablet devices, and 60 for desktop devices.

Responsive Sizing

To use the responsive sizing extensions, you need to wrap your MaterialApp or CupertinoApp with the ResponsiveApp widget.

ResponsiveApp(
  builder: (context) => MaterialApp(
    ...
  ),
)

Once you have done this, you can use the screenHeight and screenWidth extensions to get the height and width of the screen as a percentage. For example, the following code will set the height of a SizedBox to 30% of the screen height:

SizedBox(height: 30.screenHeight);

You can also use the shorthand extensions sh and sw for screenHeight and screenWidth respectively. For example, the following code will set the font size of a Text widget to 10% of the screen width:

Text('respond to width', style: TextStyle(fontSize: 10.sw));
Flutter News Hub