Animate changes to flexlayouts

packages/devtools_app/lib/src/inspector/flutter/inspector_data_models.dart

@@ -105,11 +105,34 @@ class LayoutProperties {
  LayoutProperties(child, copyLevel: copyLevel - 1))
  ?.toList(growable: false);
 
+ LayoutProperties.values({
+ @required this.node,
+ @required this.children,
+ @required this.constraints,
+ @required this.description,
+ @required this.flexFactor,
+ @required this.isFlex,
+ @required this.size,
+ });
+
+ factory LayoutProperties.lerp(
+ LayoutProperties begin, LayoutProperties end, double t) {
+ return LayoutProperties.values(
+ node: end.node,
+ children: end.children,
+ constraints: BoxConstraints.lerp(begin.constraints, end.constraints, t),
+ description: end.description,
+ flexFactor: begin.flexFactor + (begin.flexFactor - end.flexFactor) * t,
+ isFlex: begin.isFlex && end.isFlex,
+ size: Size.lerp(begin.size, end.size, t),
+ );
+ }
+
  final RemoteDiagnosticsNode node;
  final List<LayoutProperties> children;
  final BoxConstraints constraints;
  final String description;
- final int flexFactor;
+ final num flexFactor;
  final bool isFlex;
  final Size size;
 
@@ -172,13 +195,57 @@ class LayoutProperties {
  double.parse(json['height']),
  );
  }
+
+ LayoutProperties copyWith({
+ List<LayoutProperties> children,
+ BoxConstraints constraints,
+ String description,
+ int flexFactor,
+ bool isFlex,
+ Size size,
+ }) {
+ return LayoutProperties.values(
+ node: node,
+ children: children ?? this.children,
+ constraints: constraints ?? this.constraints,
+ description: description ?? this.description,
+ flexFactor: flexFactor ?? this.flexFactor,
+ isFlex: isFlex ?? this.isFlex,
+ size: size ?? this.size,
+ );
+ }
 }
 
 final Expando<FlexLayoutProperties> _flexLayoutExpando = Expando();
 
 /// TODO(albertusangga): Move this to [RemoteDiagnosticsNode] once dart:html app is removed
 class FlexLayoutProperties extends LayoutProperties {
- FlexLayoutProperties._(
+ FlexLayoutProperties({
+ Size size,
+ List<LayoutProperties> children,
+ RemoteDiagnosticsNode node,
+ BoxConstraints constraints,
+ bool isFlex,
+ String description,
+ num flexFactor,
+ this.direction,
+ this.mainAxisAlignment,
+ this.crossAxisAlignment,
+ this.mainAxisSize,
+ this.textDirection,
+ this.verticalDirection,
+ this.textBaseline,
+ }) : super.values(
+ size: size,
+ children: children,
+ node: node,
+ constraints: constraints,
+ isFlex: isFlex,
+ description: description,
+ flexFactor: flexFactor,
+ );
+
+ FlexLayoutProperties._fromNode(
  RemoteDiagnosticsNode node, {
  this.direction,
  this.mainAxisAlignment,
@@ -197,6 +264,40 @@ class FlexLayoutProperties extends LayoutProperties {
  return _flexLayoutExpando[node] ??= _buildNode(node);
  }
 
+ @override
+ FlexLayoutProperties copyWith({
+ Size size,
+ List<LayoutProperties> children,
+ BoxConstraints constraints,
+ bool isFlex,
+ String description,
+ num flexFactor,
+ Axis direction,
+ MainAxisAlignment mainAxisAlignment,
+ MainAxisSize mainAxisSize,
+ CrossAxisAlignment crossAxisAlignment,
+ TextDirection textDirection,
+ VerticalDirection verticalDirection,
+ TextBaseline textBaseline,
+ }) {
+ return FlexLayoutProperties(
+ size: size ?? this.size,
+ children: children ?? this.children,
+ node: node,
+ constraints: constraints ?? this.constraints,
+ isFlex: isFlex ?? this.isFlex,
+ description: description ?? this.description,
+ flexFactor: flexFactor ?? this.flexFactor,
+ direction: direction ?? this.direction,
+ mainAxisAlignment: mainAxisAlignment ?? this.mainAxisAlignment,
+ mainAxisSize: mainAxisSize ?? this.mainAxisSize,
+ crossAxisAlignment: crossAxisAlignment ?? this.crossAxisAlignment,
+ textDirection: textDirection ?? this.textDirection,
+ verticalDirection: verticalDirection ?? this.verticalDirection,
+ textBaseline: textBaseline ?? this.textBaseline,
+ );
+ }
+
  static FlexLayoutProperties _buildNode(RemoteDiagnosticsNode node) {
  final Map<String, Object> renderObjectJson = node?.renderObject;
  if (renderObjectJson == null) return null;
@@ -206,7 +307,7 @@ class FlexLayoutProperties extends LayoutProperties {
  key: (property) => property['name'],
  value: (property) => property['description'],
  );
- return FlexLayoutProperties._(
+ return FlexLayoutProperties._fromNode(
  node,
  direction: _directionUtils.enumEntry(data['direction']),
  mainAxisAlignment:
@@ -222,8 +323,8 @@ class FlexLayoutProperties extends LayoutProperties {
  }
 
  final Axis direction;
- MainAxisAlignment mainAxisAlignment;
- CrossAxisAlignment crossAxisAlignment;
+final MainAxisAlignment mainAxisAlignment;
+final CrossAxisAlignment crossAxisAlignment;
  final MainAxisSize mainAxisSize;
  final TextDirection textDirection;
  final VerticalDirection verticalDirection;
@@ -245,11 +346,12 @@ class FlexLayoutProperties extends LayoutProperties {
 
  String get type => direction == Axis.horizontal ? 'Row' : 'Column';
 
-int get totalFlex {
+num get totalFlex {
  if (children?.isEmpty ?? true) return 0;
  _totalFlex ??= children
  .map((child) => child.flexFactor ?? 0)
- .reduce((value, element) => value + element);
+ .reduce((value, element) => value + element)
+ .toInt();
  return _totalFlex;
  }
 

packages/devtools_app/lib/src/inspector/flutter/inspector_service_flutter_extension.dart

@@ -14,6 +14,7 @@ extension InspectorFlutterService on ObjectGroup {
  ' final render = object.renderObject;'
  ' render.mainAxisAlignment = $mainAxisAlignment;'
  ' render.crossAxisAlignment = $crossAxisAlignment;'
+ ' render.markNeedsLayout();'
  '})()';
  final val = await inspectorLibrary.eval(
  command,