render_metrics 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • new46

render_metrics #

A library that helps to perform actions with some periodicity

Usage of RenderMetrics #

main classes:

  1. RenderMetricsObject
  2. RenderMetricsBox
  3. RenderManager
  4. RenderParametersManager
  5. RenderData
  6. ComparisonDiff
  7. CoordsMetrics

Library for getting widget metrics. #

Allows you to get the sizes of widgets even without their explicit indication and coordinates relative to the screen.

Classes in the library #

Render classes #

RenderMetricsObject - Descendant of SingleChildRenderObjectWidget. Accepts the widget from which to get metrics.

RenderMetricsBox - descendant of RenderProxyBox. Provides metric data.

Data classes #

RenderData - class provides widget metrics data.

CoordsMetrics - coordinate point class.

ComparisonDiff - class with a difference of coordinates between two RenderData List of available values:

Managers #

RenderManager - Base class for the manager. Your own managers should inherit from it. RenderParametersManager - Ready Render Manager successor storing the RenderMetricsBox list and functionality for working with them.


Metric Data Provided #

double data: #

width - Widget width.

height - Widget height.

yTop - Top Y position relative to the screen.

yBottom - Lower Y position relative to the screen.

yCenter - Center Y position relative to the screen.

xLeft - Left X position relative to the screen.

xRight - Right X position relative to the screen.

xCenter - Center X position relative to the screen.

CoordsMetrics Instances: #

topLeft - Upper left coordinate.

topRight - Upper right coordinate.

bottomLeft - Lower left coordinate.

bottomRight - Lower right coordinate.

center - Central coordinate.

topCenter - Upper center coordinate.

bottomCenter - Lower central coordinate.

centerLeft - Center left coordinate.

centerRight - Center right coordinate.


RenderData difference data in ComparisonDiff #

yTop - Difference of the upper Y position relative to the screen.

yBottom - Difference of the lower Y position relative to the screen.

yCenter - Difference of the central Y position relative to the screen.

xLeft - Difference left X position relative to the screen.

xRight - Difference of the right X position relative to the screen.

xCenter - Difference of the central X position relative to the screen.

diffTopToBottom - Difference of the upper border.

diffBottomToTop - Difference of the lower border.

diffLeftToRight - Difference of the left border.

diffRightToLeft - Difference of the right border.

width - Difference in width of elements.

height - Difference in element heights.

topLeft - The difference between the upper left coordinates.

topRight - The difference between the upper right coordinates.

bottomLeft - The difference between the lower left coordinates.

bottomRight - The difference between the lower right coordinates.

center - The difference between the central coordinates.

topCenter - The difference between the upper center coordinates.

bottomCenter - The difference between the lower center coordinates.

centerLeft - The difference between the central left coordinates.

centerRight - The difference between the center right coordinates.

RenderParametersManager functionality #

addRenderObject - Add an instance of RenderObject.

getRenderObject - Add an instance of RenderObject by id.

getRenderData - Get an instance of RenderData with metrics. widget by id.

removeRenderObject - Remove an instance of RenderObject.

Usage: #

  1. Wrap the widget from which you want to get metrics (size, position, etc.) in [RenderMetricsObject].
  2. Pass the id. Only required when using RenderManager.
  3. onMount method - will work when creating a RenderObject. Takes in the parameters: Passed id. An instance of the RenderMetricsBox - the successor to the RenderProxyBox.
  4. The onUnMount method will work when deleting widgets from the tree. Takes in the parameters: Passed id.
  5. manager - an optional parameter. Waiting for a RenderManager descendant. [RenderParametersManager] - a ready-made descendant of the RenderManager. Allows you to get widget metrics: Position and dimensions in [RenderData] The difference between the two [RenderData] in the class instance [ComparisonDiff] You can use your heir [RenderManager].

1.0.0 #

Added #

  • RenderData class with widget metrics added
  • Added ComparisonDiff class with the difference between two RenderData
  • Added CoordsMetrics class with x and y coordinates
  • Added class RenderManager
  • Added class RenderParametersManager
  • Added class RenderMetricsObject
  • Added class RenderMetricsBox

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:render_metrics/render_metrics.dart';
import 'package:render_metrics/src/manager/render_parameters_manager.dart';
import 'package:render_metrics/src/render/render_metrics.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Render Metrics Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Auto reload Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  RenderParametersManager renderManager = RenderParametersManager();

  String _text0Id = 'text0Id';
  String _text1Id = 'text1Id';
  String _containerPositionedId = 'containerPositionedId';
  String _textBlockId = 'textBlockId';

  final _scrollController = ScrollController();

  bool _isOpacity = false;

  String _text0 = '';

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_scrollListener);
    setState(() {});
  }

  void _scrollListener() {
    setState(() {
      _text0 = _getRenderDataText(_text0Id);
    });

    final ComparisonDiff diff =
        renderManager.getDiffById(_containerPositionedId, _textBlockId);

    _changeBlockUi(diff.diffBottomToTop > 0);
  }

  void _changeBlockUi(bool isChange) {
    if (_isOpacity == isChange) return;
    setState(() {
      _isOpacity = isChange;
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Stack(
          children: <Widget>[
            ListView(
              controller: _scrollController,
              children: <Widget>[
                const SizedBox(height: 500),
                RenderMetricsObject(
                  id: _textBlockId,
                  manager: renderManager,
                  onMount: (id, box) {
                    // Method called when creating a RenderObject
                    // id - passed id (In this case, the string from _textBlockId)
                    // box - renderMetricsBox instance from which data is taken
                  },
                  onUnMount: (box) {
                    // Method called when RenderObject is removed from the tree
                    // box - renderMetricsBox instance from which data is taken
                  },
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      RenderMetricsObject(
                        id: _text1Id,
                        manager: renderManager,
                        child: _buildTextContainer(
                          'Diff metrics between the current and the blue square:'
                          '\n\n'
                          '${renderManager.getDiffById(_text1Id, _containerPositionedId) ?? ''}',
                        ),
                      ),
                      const SizedBox(height: 20),
                      RenderMetricsObject(
                        id: _text0Id,
                        manager: renderManager,
                        child: _buildTextContainer(
                          'Metrics:\n\n$_text0',
                        ),
                      ),
                      const SizedBox(height: 1500),
                    ],
                  ),
                )
              ],
            ),
            Positioned(
              top: 50,
              left: 10,
              child: _buildBox(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildBox() {
    return RenderMetricsObject(
      id: _containerPositionedId,
      manager: renderManager,
      child: AnimatedOpacity(
        duration: const Duration(milliseconds: 250),
        opacity: _isOpacity ? .5 : 1,
        child: Container(
          width: 300,
          height: 210,
          color: Colors.blue,
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Text(
              'Blue Container() widget metrics:'
              '\n\n'
              '${_getRenderDataText(_containerPositionedId)}',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildTextContainer(String text) {
    return Container(
      color: Colors.black.withOpacity(.2),
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Text(
          text,
        ),
      ),
    );
  }

  String _getRenderDataText<T>(T id) {
    final data = renderManager.getRenderData(id);
    if (data == null) return '';
    return data.toString();
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  render_metrics: ^1.0.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:render_metrics/render_metrics.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
46
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • render_metrics that is a package requiring null.

Health suggestions

Format lib/src/data/render_data.dart.

Run flutter format to format lib/src/data/render_data.dart.

Format lib/src/manager/render_parameters_manager.dart.

Run flutter format to format lib/src/manager/render_parameters_manager.dart.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

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