Responsive Ui Builder

Getting Started

The responsive ui builder package contains widgets that helps you to create your UI responsive.

Installation

Add responsive_ui_builder as dependency to your pubspec file.

responsive_ui__builder:

Usage

This package provides a widget called ResponsiveUiBuilder that provides you with a builder function that returns the current ResponsiveUiSize.

Responsive Builder

The ResponsiveUiBuilder is used as any other builder widget.

// import the package
import 'package:responsive_ui_builder/responsive_ui__builder.dart';

// Use the widget
ResponsiveUiBuilder(
            small: (context, sm) {
              return Container(
                color: Colors.red,
              );
            },
            medium: (context, md) {
              return Container(
                color: Colors.yellow,
              );
            },
            large: (context, lg) {
              return Container(
                color: Colors.green,
              );
            },
          );

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.

GitHub

View Github