Skip to content

[Story of Your Layout] Make dropdown align to their axis and make flex widget clickable #1392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
albertusdev merged 6 commits into from
Nov 22, 2019
Merged

[Story of Your Layout] Make dropdown align to their axis and make flex widget clickable #1392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dbb0e29
Make dropdown align to their axis and make flex widget clickable
Nov 22, 2019
f323c8e
Fix relative import and dartfmt
Nov 22, 2019
d924e49
Update golden files (might file because running from mac)
Nov 22, 2019
022bca3
Avoid changing textDirection and document onChange type signature
Nov 22, 2019
16c1415
Update goldens
Nov 22, 2019
041d853
Change inheritFromWidgetOfExactType to dependOnInheritedWidgetOfExact…
Nov 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/devtools_app/lib/src/flutter/controllers.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ class Controllers extends StatefulWidget {

static ProvidedControllers of(BuildContext context) {
final _InheritedProvider inherited =
context.inheritFromWidgetOfExactType(_InheritedProvider);
context.dependOnInheritedWidgetOfExactType(aspect: _InheritedProvider);
return inherited.data;
}
}
Expand Down
26 changes: 12 additions & 14 deletions packages/devtools_app/lib/src/inspector/flutter/inspector_data_models.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import 'package:flutter/widgets.dart';
import '../../utils.dart';
import '../diagnostics_node.dart';
import '../enum_utils.dart';
import '../inspector_tree.dart';
import 'story_of_your_layout/utils.dart';

const Type boxConstraintsType = BoxConstraints;
Expand Down Expand Up @@ -95,19 +94,19 @@ List<double> computeRenderSizes({
// TODO(albertusangga): Move this to [RemoteDiagnosticsNode] once dart:html app is removed
class LayoutProperties {
LayoutProperties(this.node, {int copyLevel = 1})
: description = node.diagnostic?.description,
size = deserializeSize(node.diagnostic?.size),
constraints = deserializeConstraints(node.diagnostic?.constraints),
isFlex = node.diagnostic?.isFlex,
flexFactor = node.diagnostic?.flexFactor,
: description = node?.description,
size = deserializeSize(node?.size),
constraints = deserializeConstraints(node?.constraints),
isFlex = node?.isFlex,
flexFactor = node?.flexFactor,
children = copyLevel == 0
? []
: node.children
: node?.childrenNow
?.map((child) =>
LayoutProperties(child, copyLevel: copyLevel - 1))
?.toList(growable: false);

final InspectorTreeNode node;
final RemoteDiagnosticsNode node;
final List<LayoutProperties> children;
final BoxConstraints constraints;
final String description;
Expand Down Expand Up @@ -178,7 +177,7 @@ final Expando<FlexLayoutProperties> _flexLayoutExpando = Expando();
/// TODO(albertusangga): Move this to [RemoteDiagnosticsNode] once dart:html app is removed
class FlexLayoutProperties extends LayoutProperties {
FlexLayoutProperties._(
InspectorTreeNode node, {
RemoteDiagnosticsNode node, {
Comment thread
albertusdev marked this conversation as resolved.
this.direction,
this.mainAxisAlignment,
this.mainAxisSize,
Expand All @@ -188,16 +187,15 @@ class FlexLayoutProperties extends LayoutProperties {
this.textBaseline,
}) : super(node);

factory FlexLayoutProperties.fromNode(InspectorTreeNode node) {
factory FlexLayoutProperties.fromDiagnostics(RemoteDiagnosticsNode node) {
// Cache the properties on an expando so that local tweaks to
// FlexLayoutProperties persist across multiple lookups from an
// InspectorTreeNode.
// RemoteDiagnosticsNode.
return _flexLayoutExpando[node] ??= _buildNode(node);
}

static FlexLayoutProperties _buildNode(InspectorTreeNode node) {
final Map<String, Object> renderObjectJson =
node.diagnostic.json['renderObject'];
static FlexLayoutProperties _buildNode(RemoteDiagnosticsNode node) {
final Map<String, Object> renderObjectJson = node.json['renderObject'];
final List<dynamic> properties = renderObjectJson['properties'];
final Map<String, Object> data = Map<String, Object>.fromIterable(
properties,
Expand Down
19 changes: 9 additions & 10 deletions packages/devtools_app/lib/src/inspector/flutter/inspector_screen_details_tab.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

import '../diagnostics_node.dart';
import '../inspector_controller.dart';
import '../inspector_tree.dart';
import 'inspector_data_models.dart';
import 'story_of_your_layout/flex.dart';

Expand Down Expand Up @@ -101,7 +101,7 @@ class _LayoutDetailsTabState extends State<LayoutDetailsTab>
with AutomaticKeepAliveClientMixin<LayoutDetailsTab> {
InspectorController get controller => widget.controller;

InspectorTreeNode get selected => controller?.selectedNode;
RemoteDiagnosticsNode get selected => controller?.selectedNode?.diagnostic;

void onSelectionChanged() {
setState(() {});
Expand All @@ -122,16 +122,15 @@ class _LayoutDetailsTabState extends State<LayoutDetailsTab>
@override
Widget build(BuildContext context) {
super.build(context);
final diagnostic = selected?.diagnostic;
// TODO(albertusangga): Visualize non-flex widget constraint model
if (diagnostic == null ||
(!diagnostic.isFlex && !(diagnostic.parent?.isFlex ?? false)))
if (selected == null ||
(!selected.isFlex && !(selected.parent?.isFlex ?? false)))
return const SizedBox();
final flexLayoutProperties = FlexLayoutProperties.fromNode(
diagnostic.isFlex ? selected : selected.parent);
final highlightChild = diagnostic.isFlex
? null
: diagnostic.parent.childrenNow.indexOf(diagnostic);
final flexLayoutProperties = FlexLayoutProperties.fromDiagnostics(
selected.isFlex ? selected : selected.parent,
);
final highlightChild =
selected.isFlex ? null : selected.parent.childrenNow.indexOf(selected);
return StoryOfYourFlexWidget(
// TODO(albertusangga): Cache this instead of recomputing every build,
flexLayoutProperties,
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools_app/lib/src/inspector/flutter/inspector_tree_flutter.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -569,7 +569,7 @@ class InspectorRowContent extends StatelessWidget {
constraintDisplayController != null)
ConstraintsDescription(
listenable: constraintDisplayController,
properties: LayoutProperties(node),
properties: LayoutProperties(node.diagnostic),
),
],
),
Expand Down
Loading