responsive_builder 0.1.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

Responsive Builder 💻➡️🖥➡️📱➡️⌚️ #

The responsive builder package contains widgets that allows you to create a readable responsive UI. The package is inspired by the Responsive UI Flutter series created by FilledStacks.

It aims to provide you with widgets that make it easy to build different UI's along two different Axis. Orientation x ScreenType. This means you can have a separate layout for Mobile - Landscape, Mobile - Portrait, Tablet - Landscape and Tablet-Portrait.

If you follow along with the series you will have a complete understanding of how it's built and how to use it. Part 2 goes over how we build the example included in this project.

Responsive Layout Preview

Installation #

Add responsive_builder as dependency to your pubspec file.

responsive_builder:

Usage #

This package provides a widget called ResponsiveBuilder that provides you with a builder function that returns the current SizingInformation. The SizingInformation includes the DeviceScreenType, screenSize and localWidgetSize. This can be used for fine grained responsive control from a view level down to per widget responsive level.

Responsive Builder #

The ResponsiveBuilder is used as any other builder widget.

// import the package
import 'package:responsive_builder/responsive_builder.dart';

// Use the widget
ResponsiveBuilder(
    builder: (context, sizingInformation) {
      // Check the sizing information here and return your UI
          if (sizingInformation.deviceScreenType == DeviceScreenType.Desktop) {
          return Container(color:Colors.blue);
        }

        if (sizingInformation.deviceScreenType == DeviceScreenType.Tablet) {
          return Container(color:Colors.red);
        }

        if (sizingInformation.deviceScreenType == DeviceScreenType.Watch) {
          return Container(color:Colors.yellow);
        }

        return Container(color:Colors.purple);
      },
    },
  );
}

This will return different colour containers depending on which device it's being shown on. A simple way to test this is to either run your code on Flutter web and resize the window or add the device_preview package and view on different devices.

Orientation Layout Builder #

This widget can be seen as a duplicate of the OrientationBuilder that comes with Flutter, but the point of this library is to help you produce a readable responsive UI code base. As mentioned in the follow along tutorial I didn't want responsive code riddled with conditionals around orientation, MediaQuery or Renderbox sizes. That's why I created this builder.

The usage is easy. Provide a builder function that returns a UI for each of the orientations.

// import the package
import 'package:responsive_builder/responsive_builder.dart';

// Return a widget function per orientation
OrientationLayoutBuilder(
  portrait: (context) => Container(color: Colors.green),
  landscape: (context) => Container(color: Colors.pink),
),

This will return a different coloured container when you swap orientations for your device. In a more readable manner than checking the orientation with a conditional.

Screen Type Layout #

This widget is similar to the Orientation Layout Builder in that it takes in Widgets that are named and displayed for different screen types.

// import the package
import 'package:responsive_builder/responsive_builder.dart';

// Construct and pass in a widget per screen type
ScreenTypeLayout(
  mobile: Container(color:Colors.blue)
  tablet: Container(color: Colors.yellow),
  desktop: Container(color: Colors.red),
  watch: Container(color: Colors.purple),
);

Custom Screen Breakpoints #

If you wish to define your own custom break points you can do so by supplying either the ScreenTypeLayout or ResponsiveBuilder widgets with a breakpoints argument.

// import the package
import 'package:responsive_builder/responsive_builder.dart';

//ScreenTypeLayout with custom breakpoints supplied
ScreenTypeLayout(
  breakpoints: ScreenBreakpoints(
    tablet: 600,
    desktop: 950,
    watch: 300
  ),
  mobile: Container(color:Colors.blue)
  tablet: Container(color: Colors.yellow),
  desktop: Container(color: Colors.red),
  watch: Container(color: Colors.purple),
);

To get a more in depth run through of this package I would highly recommend watching this tutorial where I show you how it was built and how to use it.

Contribution #

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request.

[0.1.0] - 2019-10-29

Added initial widgets required for a clean responsive UI architecture.

[0.1.1] - 2019-11-06

Update the ScreenTypeLayout widget to use an incremental layout approach. If the desktop isn't supplied and we're in desktop mode we check if there's a tablet layout and show that, otherwise we show the mobile layout.

[0.1.2] - 2019-11-06

Updated screen type calculation to account for being on the Web. Width was swapping with the height when it got too wide so we're checking for web explicitly and using the width of the window.

[0.1.3] - 2019-11-06

Added shorthand bool properties to sizing information to check which device screen type is currently being show.

[0.1.4] - 2019-11-11

Added optional screen break points definition to pass in to the ResponsiveBuilder or the ScreenLayoutView.

example/README.md

Responsive Builder Example 💻➡️🖥➡️📱➡️⌚️ #

The example included in this project is built in this tutorial which is Part 2 of the responsive UI series by FilledStacks.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  responsive_builder: ^0.1.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:responsive_builder/responsive_builder.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
93
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

We analyzed this package on Jan 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Format lib/responsive_builder.dart.

Run flutter format to format lib/responsive_builder.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test