measured 0.1.0

displays the actual size every time the size of the child widget changes

Measured

This widget displays the actual width and height every time the size of the child widget changes.

Introduction

• We can check how the size changes when the screen layout or the arrangement of widgets changes
• Conversely, we can determine the appropriate size on the screen and use it as a reference for UX and UI design.
• We can register a callback to be executed when the size of a child widget changes.

Getting started

In your library add the following import:

import 'package:measured/measured.dart';

Then you just have to add a Measured which wrap a child widget whose size change you want to monitor.

final controller = AnimationController(vsync: this);
...
...
Measured(
  child: SizedBox(
    width: 100.0 + 50.0 * controller.value,
    height:100.0 + 50.0 * (1 - controller.value),
    child: Container(
      color: Colors.red,
    ),
  ),
)

or
...
/// using in Widget extension
SizedBox(
    width: 100.0 + 50.0 * controller.value,
    height:100.0 + 50.0 * (1 - controller.value),
    child: Container(
      color: Colors.red,
    ),
  ).measured(
    borders: const [
      MeasuredBorder.right,
      MeasuredBorder.bottom,
    ],
    onChanged(
      () => {}
    ),
  )

Parameters

borders

• Specify the left, right, top, and bottom where the size will be displayed.
• If not set, the default value is [MeasuredBorder.top, MeasuredBorder.left], in shortly MeasuredBorder.topleft.

onChanged

• Executes the registered callback every time the size of the child widget changes.

outlined

• Draws a rectangular border that fits the size of the child widget.

width, color

• Measuring line's stroke width and color

padding

• Specify the gap between the location where the size will be displayed and the border.

Changelog

• Please check the Changelog page to know what's recently changed.

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue. If you fixed a bug or implemented a feature, please send a pull request.