responsive_util 0.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 81

responsive_util #

pub package Platform

A wrapper that provides draggable manipulation of a widget's size to test it's responsive design.

Example Example


Usage #

Wrap a widget such as a Scaffold with a ResponsiveUtil and resize it by dragging from the bottom right.


PropertiesDescription
childThe Widget to resize
onResizeFor conditional layouts that rely on MediaQuery rather than LayoutBuilder to determine available space, use onResize to obtain a virtual screen Size.
disabledIf True, bypasses all functionality
scrollControllerRequired for Widgets that exist in some ScrollView

0.2.0 #

  • Resizing now works in flex layouts and scrollviews, added scrollController, updated documentation.

0.1.2 #

  • Fixed gesture detector not using local bounds, resizing now works on all Widgets with constraints.

0.1.1 #

  • Minor updates to documentation.

0.1.0 #

  • Updated Example and Readme for pub.

0.0.1 #

  • Initial release.

example/README.md

Usage #

Resize the entire screen's layout.

  @override
  Widget build(BuildContext context) {
    return ResponsiveUtil(
      child: Scaffold(
        body: Container()
      ),
    );
  }
}

Resize a Widget, this example switches between using a Column and Row depending on available width.

ResponsiveUtil(
  child: Card(
    child: LayoutBuilder(builder: (context, constraints) {
      Axis direction = constraints.maxWidth > 300
          ? Axis.horizontal
          : Axis.vertical;
      return Flex(
        // if wrapper width < 300, use a column rather than a Row
        direction: direction,
        children: <Widget>[
          Container(
            margin: EdgeInsets.all(12.0),
            child: CircleAvatar(
              radius: 32,
            ),
          ),
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(24.0),
              child: Text(
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
              ),
            ),
          ),
        ],
      );
    }),
  ),
)

Resize a Widget in a ScrollView by passing a ScrollController.

Card(
  // containers with margins should wrap RespsoniveUtil 
  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
  child: ResponsiveUtil(
    scrollController: scrollController,
    child: LayoutBuilder(builder: (context, constraints) {
      Axis direction = constraints.maxWidth > 300
          ? Axis.horizontal
          : Axis.vertical;
      return Flex(
        direction: direction,
        children: <Widget>[
          Container(
            margin: EdgeInsets.all(12.0),
            child: CircleAvatar(
              radius: 32,
            ),
          ),
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(24.0),
              child: AutoSizeText(
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                minFontSize: direction ==Axis.horizontal ? 14 :  8,
              style: TextStyle(fontSize: 16),
              ),
            ),
          ),
        ],
      );
    }),
  ),
)

Use this package as a library

1. Depend on it

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


dependencies:
  responsive_util: ^0.2.0

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_util/responsive_util.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
62
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]
81
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/responsive_util.dart.

Run flutter format to format lib/responsive_util.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