responsive_ui_builder 0.0.3

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

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.

Custom Screen Breakpoints

If you wish to define your own custom break points you can do so by supplying e ResponsiveUiBuilder widgets with a breakpoints argument.

// import the package
import 'package:responsive_ui_builder/responsive_ui_builder.dart';
//ScreenTypeLayout with custom breakpoints supplied
ResponsiveUiBuilder(
            breakpoints:
                const ScreenBreakpoints(medium: 600, large: 950, small: 300),
            small: Container(color: Colors.blue),
            medium: Container(color: Colors.yellow),
            large: Container(color: Colors.red),
          ),