[Personal WIP] Story of Layout feature #1

albertusdev · 2019-10-23T23:49:21Z

A PR to show my progress on working on this feature.

Dependency:

Flutter framework change:
Story of layout PR flutter#2

albertusdev · 2019-10-23T23:49:51Z

Check-in 1:

Show BoxConstraints next to the summary tree
Highlight constraints of widget that unconstrained it's child

albertusdev · 2019-10-24T04:29:07Z

Check-in 2:

Rename Show Constraints button to Layout button (change term of showConstraints to debugLayoutModeEnabled)
Change color from red to yellow (Dangerous to Warning, since we are unsure whether it's really an error)
Highlight children that got unconstrained by its parents (highlight the contraints text)
Highlight the parent widget name that unconstrained its child
Show fade-in/fade-out animation when Debug Layout mode

Concerns:

performance on Flutter web since I'm using ValueNotifier & ValueListenableBuilder for all of the inspector row nodes

albertusdev · 2019-10-24T04:33:54Z

Check-in 3:

Made very early prototype on explaining Flex layouting (the feature for now will be temporarily called 'Story of Your Flex Widget')
Visualizing Flex and able to detect the Flex type (Row/Column)
Displaying correct amount of children and all of the children's widget name
All children are still equally weighted for this check in

jacob314 · 2019-10-24T04:39:39Z

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

@@ -4,6 +4,7 @@

 import 'dart:math';

+import 'package:devtools_app/src/ui/fake_flutter/_real_flutter.dart';


auto imports are doing the wrong thing. just go ahead and import
'package:flutter/material.dart'

jacob314 · 2019-10-24T04:41:58Z

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

+    final Map<String, Object> flexDetails = node.diagnostic?.json['flex'];
+    final int numOfChildren = node.diagnostic.childrenNow.length;
+    final List<Widget> children = node.diagnostic.childrenNow.map((RemoteDiagnosticsNode child) => Expanded(
+      flex: 1,


you can now use List comprehensions for this sort of case in dart. so
[for (var child in node.diagnostic.childrenNow)
Container(something something)
];

jacob314 · 2019-10-24T04:44:26Z

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

+          children: [
+            Container(
+              margin: const EdgeInsets.only(bottom: 4.0),
+              child: const Text('Story of Your Flex Widget', style: TextStyle(


Add the name of the widget class. So:
'Story of the flex layout of your ${diagnostic.description} widget'
so
Story of the flex layout of your Column widget
or
Story of the flex layout of your Row widget.

jacob314 · 2019-10-24T04:45:38Z

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

  @override
  Widget build(BuildContext context) {
+    final Map<String, Object> flexDetails = node.diagnostic?.json['flex'];


Exciting to see this!
Go ahead and add getters for the extra json fields you add to RemoteDiagnosticsNode.

jacob314 · 2019-10-24T04:46:33Z

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

+            ),
+            Expanded(
+              child: Container(
+                color: Colors.blue,


try to use colors from the Theme whenever possible. That will make the ui work in dark and light theme.
See calls to Theme.of in the code for examples.

albertusdev · 2019-10-24T05:10:49Z

Check in 4:

Avoid using hardcoded color and instead use Color from Theme (to support Light/Dark theme)
Remove hack in InspectorTree node
Remove wrong import
Rename 'Story of your Flex widget' to 'Story of the layout of your Row/Column widget'

TODOs for tomorrow:

Choose more contrasts and sutiable colors
Display Flex widget size, constraints, main axis and cross axis
Properly size Flex children

Screenshots:

albertusdev · 2019-10-25T03:19:21Z

Check in 5:

Changelist:

Create proper deserializer method for flex properties from DiagnosticsNode
Create new flag (isExperimentalStoryOfLayoutEnabled) in InspectorTreeFlutterController to prevent showing all this features changes until my PR (github.com/Story of layout PR flutter#2) is landed to Flutter main repository
Inspector details tree now live inside of Tabs! User can focus on layout details instead if they want to.
Removed animation from DianogsticsNodeDescriptions for now (due to minor performance concerns and adding new flag, might add it later!)
Changed hardcoded constants for Buttons in InspectorScreen to prevent button groups expanding to two lines

Screenshots:

Inspector screen have tabs now!

TODOs:

Remove // constraints word from ConstraintsDescriptor
Highlight only unconstrained word in the ConstraintsDescriptor
Move StoryOfYourFlexWidget from Dialog to Tab

…rent widget that did the unconstraining, and add animation

…pport Light/Dark theme) - Remove hack in InspectorTree node - Remove wrong import - Rename 'Story of your Flex widget' to 'Story of the layout of your Row/Column widget'

… for details tree, and several minor changes. - Create proper deserializer method for flex properties from DiagnosticsNode - Create new flag (`isExperimentalStoryOfLayoutEnabled`) in `InspectorTreeFlutterController` to prevent showing all this features changes until my PR (github.com/albertusdev/flutter/pull/2) is landed to Flutter main repository - Inspector details tree now live inside of Tabs! User can focus on layout details instead if they want to. - Removed animation from DianogsticsNodeDescriptions for now (due to minor performance concerns and adding new flag, might add it later!) - Changed hardcoded constants for Buttons in InspectorScreen to prevent button groups expanding to two lines

…ructor

…yout

…perties

- Stop exposing InspectorController in InspectorTreeControllerFlutter - Remove shouldHighlightConstraint getter since it is unnecessary now - Rename some variable names - Add copyright in new files

…ve children

…EnumUtils instead

…yout

- Add todos - Rename toName & toEnum to name and enum - Minor cleanups

…yout

jacob314 reviewed Oct 24, 2019

View reviewed changes

albertusdev mentioned this pull request Oct 24, 2019

Story of layout PR albertusdev/flutter#2

Closed

9 tasks

jacob314 reviewed Oct 24, 2019

View reviewed changes

Albertus Angga Raharja added 8 commits October 24, 2019 20:30

Show constraints next to Widget in Summary Tree

7994a51

Highlight children's constraints that got unconstrained, highlight pa…

87e5328

…rent widget that did the unconstraining, and add animation

Very early prototype of 'Story of Your Flex Widget' dialog

00e7406

- Avoid using hardcoded color and instead use Color from Theme (to su…

ae82c90

…pport Light/Dark theme) - Remove hack in InspectorTree node - Remove wrong import - Rename 'Story of your Flex widget' to 'Story of the layout of your Row/Column widget'

Remove debugLayoutModeEnabled from DiagnosticsNodeDescription

44e06b7

Change isExperimentalStoryOfLayoutEnabled default value to false

502e417

Revert diagnostics.dart

b86aeee

albertusdev force-pushed the story-of-layout branch from e913197 to b86aeee Compare October 25, 2019 03:31

albertusdev mentioned this pull request Oct 25, 2019

[Story of your layout] Experimental flag flutter/devtools#1256

Merged

Albertus Angga Raharja added 2 commits October 24, 2019 20:35

Revert spreading getServiceExtensionWidgets() in Flutter InspectorScreen

024de50

Remove unnecessary isSummaryTreeNode field in InspectorTreeNode const…

9cd8004

…ructor

albertusdev force-pushed the story-of-layout branch from c1c4f4e to 9cd8004 Compare October 25, 2019 03:38

Albertus Angga Raharja added 2 commits October 25, 2019 13:08

Display tab by default and fix code style and formatting

c785c1e

Port story of flex widget to Tab

3a2c5c4

Repository owner locked as off-topic and limited conversation to collaborators Oct 28, 2019

albertusdev changed the title ~~[WIP] Story of Layout feature~~ [Personal WIP] Story of Layout feature Oct 28, 2019

Albertus Angga Raharja added 2 commits October 28, 2019 12:55

Align expandCollapseButtons in the same row with the TabBar

d97e85d

Merge branch 'master' of github.com:flutter/devtools into story-of-la…

96c69fb

…yout

Rename layout_tab to inspector_screen_details_tab

bb1c30f

albertusdev force-pushed the story-of-layout branch 2 times, most recently from 69e4ce0 to fb9c121 Compare October 29, 2019 02:49

Partial highlight constraint and change deserialize method of FlexPro…

eb34a12

…perties

albertusdev force-pushed the story-of-layout branch from fb9c121 to eb34a12 Compare October 29, 2019 03:54

Albertus Angga Raharja added 11 commits October 28, 2019 21:26

Minor cleanups

ac3c522

- Stop exposing InspectorController in InspectorTreeControllerFlutter - Remove shouldHighlightConstraint getter since it is unnecessary now - Rename some variable names - Add copyright in new files

Add todos

96c7b20

Add simple widget tests and handle case when Flex element does not ha…

f0e8a34

…ve children

Extended EnumDeserializer to contain reverse lookup and rename it to …

0703b27

…EnumUtils instead

Cleanup & listen to InspectorController instead of TreeControllerFlutter

2aa854f

Remove todo

c6bfa86

Remove InspectorControllerClient implementation in LayoutDetailsTab

f66ea9e

Rename deserializer to enum utils and make enum utils private

6d03a7a

Merge branch 'master' of github.com:flutter/devtools into story-of-la…

2f57e95

…yout

Remove redundant method calls

58705d5

Stop passing InspectorController to InspectorTree flutter

88c40de

- Add todos - Rename toName & toEnum to name and enum - Minor cleanups

albertusdev force-pushed the story-of-layout branch from 0f55e76 to 88c40de Compare October 30, 2019 03:45

Add TODO

a70c74d

albertusdev force-pushed the story-of-layout branch from 35513e3 to a70c74d Compare October 30, 2019 03:49

Albertus Angga Raharja added 7 commits October 29, 2019 20:50

Remove redundant comment

67695ad

Merge branch 'master' of github.com:flutter/devtools into story-of-la…

7bdfae9

…yout

Merge branch 'master' of github.com:flutter/devtools into story-of-la…

b1d7132

…yout

Merge branch 'master' of github.com:flutter/devtools into story-of-la…

dc6a232

…yout

Fix TabBar responsiveness

88f5451

Temp checkin (Arrows in progress)

e611022

Add main/cross axis visualizer

6051925

albertusdev force-pushed the story-of-layout branch from 67d5b69 to 6051925 Compare November 4, 2019 12:16

albertusdev closed this Jul 19, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Personal WIP] Story of Layout feature #1

[Personal WIP] Story of Layout feature #1

Uh oh!

albertusdev commented Oct 23, 2019 •

edited

Loading

Uh oh!

albertusdev commented Oct 23, 2019 •

edited

Loading

Uh oh!

albertusdev commented Oct 24, 2019 •

edited

Loading

Uh oh!

albertusdev commented Oct 24, 2019 •

edited

Loading

Uh oh!

jacob314 Oct 24, 2019

Uh oh!

jacob314 Oct 24, 2019

Uh oh!

jacob314 Oct 24, 2019

Uh oh!

jacob314 Oct 24, 2019

Uh oh!

jacob314 Oct 24, 2019

Uh oh!

albertusdev commented Oct 24, 2019 •

edited

Loading

Uh oh!

albertusdev commented Oct 25, 2019

Uh oh!

Uh oh!

		@@ -4,6 +4,7 @@

		import 'dart:math';

		import 'package:devtools_app/src/ui/fake_flutter/_real_flutter.dart';

[Personal WIP] Story of Layout feature #1

[Personal WIP] Story of Layout feature #1

Uh oh!

Conversation

albertusdev commented Oct 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

albertusdev commented Oct 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

albertusdev commented Oct 24, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

albertusdev commented Oct 24, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jacob314 Oct 24, 2019

Choose a reason for hiding this comment

Uh oh!

jacob314 Oct 24, 2019

Choose a reason for hiding this comment

Uh oh!

jacob314 Oct 24, 2019

Choose a reason for hiding this comment

Uh oh!

jacob314 Oct 24, 2019

Choose a reason for hiding this comment

Uh oh!

jacob314 Oct 24, 2019

Choose a reason for hiding this comment

Uh oh!

albertusdev commented Oct 24, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

albertusdev commented Oct 25, 2019

Check in 5:

Changelist:

Screenshots:

TODOs:

Uh oh!

Uh oh!

albertusdev commented Oct 23, 2019 •

edited

Loading

albertusdev commented Oct 23, 2019 •

edited

Loading

albertusdev commented Oct 24, 2019 •

edited

Loading

albertusdev commented Oct 24, 2019 •

edited

Loading

albertusdev commented Oct 24, 2019 •

edited

Loading