dump_widget_tree 0.1.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 56

dump_widget_tree #

Flutter helper function that print Widget/Element/RenderObject/Layer trees, side-by-side.

Usage #

Simply import it and call dumpWidgetTree function.

Example #

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:dump_widget_tree/dump_widget_tree.dart';

void main() {
  Directionality icon = Directionality(
    child: Icon(Icons.favorite, size: 12),
    textDirection: TextDirection.ltr,
  );
  ShaderMask shaderMask = ShaderMask(
    shaderCallback: (Rect bounds) {
      return RadialGradient(
        colors: <Color>[Colors.black, Colors.white],
      ).createShader(bounds);
    },
    child: icon,
  );
  testWidgets('dump widget tree: ShaderMask()', (WidgetTester tester) async {
    await tester.pumpWidget(shaderMask);
    dumpWidgetTree();
  });
}

Will dump tree like this:

[Widget Tree]-----------------------------------------│[Element Tree]------------------------------------------│[RenderObject Tree]--------------------------│[Layer Tree]-------------------
└─RenderObjectToWidgetAdapter<RenderBox> (#001a6)     │└─RenderObjectToWidgetElement<RenderBox> (#00002)       │└─RenderView (#f72a5)                        │└─TransformLayer (#c3111)     
  │  → GlobalObjectKey<State<StatefulWidget>> (#f72a5)│  │                                                     │  │                                          │  │
  └─ShaderMask (#9e20f)                               │  └─SingleChildRenderObjectElement (#00007)             │  └─RenderShaderMask (#d0f08)                │  └─ShaderMaskLayer (#27978)  
    └─Directionality (#3e32b)                         │    └─InheritedElement (#00008)                         │    └─()                                     │    └─()                      
      └─Icon (#aa0c3)                                 │      └─StatelessElement (#00009)                       │      └─()                                   │      └─()                    
        └─Semantics (#d5bc0)                          │        └─SingleChildRenderObjectElement (#0000a)       │        └─RenderSemanticsAnnotations (#30b9e)│        └─PictureLayer (#feea8)
          └─ExcludeSemantics (#d5b15)                 │          └─SingleChildRenderObjectElement (#0000b)     │          └─RenderExcludeSemantics (#5fceb)  │          └─()                
            └─SizedBox (#99737)                       │            └─SingleChildRenderObjectElement (#0000c)   │            └─RenderConstrainedBox (#58537)  │            └─()              
              └─Center (#52e3b)                       │              └─SingleChildRenderObjectElement (#0000d) │              └─RenderPositionedBox (#568e9) │              └─()            
                └─RichText (#3793a)                   │                └─MultiChildRenderObjectElement (#0000e)│                └─RenderParagraph (#a7286)   │                └─()          

0.1.3 #

  • Update example

0.1.2 #

  • Update description

0.1.1 #

  • Fix typo in comment
  • Add homepage url and example pubspec.yaml

0.1.0 #

  • Add dumpWidgetTree, which print 4 tree side by side: widget, element, render object and layer

example/main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:dump_widget_tree/dump_widget_tree.dart';

///
/// use `dumpWidgetTree` to oberve how the widget to restore state from global key
///
void main() {
  final key = GlobalKey(debugLabel: 'MyKey');
  // final key = UniqueKey();
  final widget = StatefulBlock(key: key, text: 'MyWidget');
  testWidgets('dump widget tree w/ global key state',
      (WidgetTester tester) async {
    await tester.pumpWidget(widget);
    dumpWidgetTree();
    await tester.pumpWidget(Opacity(opacity: 0.6, child: widget));
    dumpWidgetTree();
  });
}

class StatelessBlock extends StatelessWidget {
  final String text;
  const StatelessBlock({Key key, this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) => Text(text);
}

class StatefulBlock extends StatefulWidget {
  final String text;
  const StatefulBlock({Key key, this.text}) : super(key: key);
  @override
  State<StatefulWidget> createState() => _BlockState(text);
}

class _BlockState extends State {
  String text;
  _BlockState(this.text);
  @override
  Widget build(BuildContext context) => Directionality(
        textDirection: TextDirection.ltr,
        child: Text(text),
      );
}

Use this package as a library

1. Depend on it

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


dependencies:
  dump_widget_tree: ^0.1.3

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

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

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health suggestions

Fix lib/dump_widget_tree.dart. (-1.49 points)

Analysis of lib/dump_widget_tree.dart reported 3 hints:

line 47 col 40: The member 'layer' can only be used within instance members of subclasses of 'package:flutter/src/rendering/object.dart'.

line 88 col 50: The member 'engineLayer' can only be used within instance members of subclasses of 'package:flutter/src/rendering/layer.dart'.

line 104 col 23: The member 'engineLayer' can only be used within instance members of subclasses of 'package:flutter/src/rendering/layer.dart'.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 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
test any