Layout Explorer not displaying accurate height of Widget in visualizer

[katisari]

Steps to Reproduce

1. Replace the contents of main.dart with the following code:

   
   import 'package:flutter/material.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: Scaffold( appBar: AppBar( title: Text('Demo'), ), body: Column(children: [ Row( children: [ Text('hello'), VerticalDivider( thickness: 5.0, ), Text('Word'), ], ), ]), ), ); } }

2. Run the program using debug mode.
3. Open DevTools
4. Select Row widget in the Flutter Inspector.
5. Open Layout Explorer.
6. Change Cross Axis to Stretch mode.

**Expected results:** <!-- what did you want to see? -->
Nothing shows on Layout Explorer screen since adding CrossAxisAlginment.Stretch to the Row widget will create an error.
**Actual results:** <!-- what did you see? -->
VerticalDivider increases in height in the Layout Explorer visualizer, but the actual height remains 0.
<img width="879" alt="Screen Shot 2020-06-19 at 8 12 04 PM" src="https://user-images.githubusercontent.com/39178730/85186815-288f1f80-b269-11ea-9edd-8c842b91c703.png">

<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue.
-->

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

</details>

[TahaTesser]

flutter doctor -v

``` [✓] Flutter (Channel master, 1.20.0-1.0.pre.132, on Mac OS X 10.15.5 19F101, locale en-GB) • Flutter version 1.20.0-1.0.pre.132 at /Users/tahatesser/Code/flutter_master • Framework revision 5995661777 (2 days ago), 2020-06-19 16:15:58 -0700 • Engine revision 676cd566f7 • Dart version 2.9.0 (build 2.9.0-17.0.dev 7e72c9ae7e) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /Users/tahatesser/Code/sdk • Platform android-29, build-tools 29.0.3 • ANDROID_HOME = /Users/tahatesser/Code/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 11.5) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.5, Build version 11E608c • CocoaPods version 1.9.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.0) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 46.0.2 • Dart plugin version 193.7361 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) [✓] VS Code (version 1.46.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.11.0 [✓] Connected device (5 available) • SM M305F • 32003c30dc19668f • android-arm64 • Android 10 (API 29) • Taha’s iPhone • 00008020-001059882212002E • ios • iOS 13.5.1 • macOS desktop • macos • darwin-x64 • Mac OS X 10.15.5 19F101 • Web Server • web-server • web-javascript • Flutter Tools • Chrome • chrome • web-javascript • Google Chrome 83.0.4103.106 • No issues found! ```

[jacob314]

Interestingly we are showing the height as zero in your screenshot although we are visualizing it like it is non-zero.

[albertusdev]

@jacob314 because of the early design and decision on the scaling algorithm in Layout Explorer, we will always try to display and visualize a zero width/height on the Layout Explorer. But yes this is indeed a bug on the visualization widget. In this case the Layout Explorer should not have visualized the Text and VerticalDivider height equally...