Skip to content

Layout Explorer not displaying accurate height of Widget in visualizer #2175

Open
Open
Layout Explorer not displaying accurate height of Widget in visualizer#2175
Labels
P2important to work on, but not at the top of the work list.cost: lowLow engineering cost to implement.devtools-inspector-screenlayout explorertype-bugSomething isn't working
Milestone
On Deck

Description

@katisari
katisari
opened on Jun 20, 2020

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'),
            ],
          ),
        ]),
      ),
    );
  }
}
  1. Run the program using debug mode.
  2. Open DevTools
  3. Select Row widget in the Flutter Inspector.
  4. Open Layout Explorer.
  5. Change Cross Axis to Stretch mode.

Expected results:
Nothing shows on Layout Explorer screen since adding CrossAxisAlginment.Stretch to the Row widget will create an error.
Actual results:
VerticalDivider increases in height in the Layout Explorer visualizer, but the actual height remains 0.
Screen Shot 2020-06-19 at 8 12 04 PM

Logs

Activity

  1. katisari
    changed the title [-]Layout Explorer not showing the actual height of Widget[/-] [+]Layout Explorer not displaying accurate height of Widget in visualizer[/+] on Jun 20, 2020

  2. TahaTesser commented on Jun 22, 2020

    @TahaTesser
    TahaTesser
    on Jun 22, 2020
    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!
  3. jacob314
    transferred this issue fromflutter/flutteron Jul 13, 2020
  4. jacob314
    added
    layout explorer
    type-bugSomething isn't working
    on Jul 15, 2020

  5. jacob314 commented on Jul 15, 2020

    @jacob314
    jacob314
    on Jul 15, 2020
    Contributor

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

  6. albertusdev commented on Jul 19, 2020

    @albertusdev
    albertusdev
    on Jul 19, 2020
    Contributor

    @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...

  7. jacob314
    added this to the M21 milestone on Aug 24, 2020
  8. kenzieschmoll
    modified the milestones: M21, On Deck on Oct 23, 2020
  9. elliette
    added
    devtools-inspector-screen
    P2important to work on, but not at the top of the work list.
    cost: lowLow engineering cost to implement.
    on Oct 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2important to work on, but not at the top of the work list.cost: lowLow engineering cost to implement.devtools-inspector-screenlayout explorertype-bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions