Horizontal tree indent guides is missing

[talalong]

Steps to Reproduce

I am using Intellij for my first Flutter demo app, but I am unable to see this tree indent guides (like the fig. 2)
Please help me how to enable this option. I've tried to check the option in Settings -> Languages & Frameworks -> Flutter -> Show UI Guides for build methods . But it doesn't help.

This is what I want it to be:

Version info

[✓] Flutter (Channel stable, 3.0.3, on macOS 12.3.1 21E258 darwin-x64, locale en-GB)
• Flutter version 3.0.3 at /Users/long.luong/Utils/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 676cefaaff (9 days ago), 2022-06-22 11:34:49 -0700
• Engine revision ffe7b86a1e
• Dart version 2.17.5
• DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/long.luong/Library/Android/sdk
• Platform android-33, build-tools 33.0.0
• ANDROID_HOME = /Users/long.luong/Library/Android/sdk
• Java binary at: /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java
• Java version Java(TM) SE Runtime Environment (build 1.8.0_331-b09)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.3

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.2)
• IntelliJ at /Users/long.luong/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
• Flutter plugin version 68.1.4
• Dart plugin version 221.5787.37

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.2)
• IntelliJ at /Users/long.luong/Library/Application
Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/221.5787.30/IntelliJ IDEA.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
• IntelliJ at /Users/long.luong/Library/Application
Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/221.5591.52/IntelliJ IDEA.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.66.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available)
• iPhone 13 (mobile) • 9B910A73-1944-49C8-9A2E-B540A0D1EE6F • ios •
com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)
• macOS (desktop) • macos • darwin-x64 • macOS 12.3.1 21E258 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 103.0.5060.53

[✓] HTTP Host Availability
• All required HTTP hosts are available

[jukrb0x]

+1

[vladislav06]

same, but sometimes they will show in another project, sometimes not.

[stevemessick]

I can reproduce the problem and am investigating.

[stevemessick]

Something changed in Flutter 3 (or rather, Dart 2.17). The Dart analyzer is no longer producing a usable outline for the indent guides. The guides do work with Flutter 2.10.5 (Dart 2.16.2).

The question is, is this a bug in the Dart SDK, or did they have a breaking change that we need to adapt to?
@jacob314 @bwilkerson can either of you add anything useful?

[jukrb0x]

@stevemessick when i create new proj with flutter sdk either in terminal or android studio (i guess they are exactly the same), the new proj won't show the indent guides, but the projects downloaded from the internet works fine. (can't tell the versions now)

❯ flutter --version
Flutter 3.0.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision cd41fdd495 (4 weeks ago) • 2022-06-08 09:52:13 -0700
Engine • revision f15f824b57
Tools • Dart 2.17.3 • DevTools 2.12.2

[stevemessick]

@jukrb0x If you open the old project and check the Flutter SDK in the Flutter preference page, I think you will find the old project is using a Flutter 2 SDK. The outline built by the Flutter 3 SDK is incorrect. Here are screen shots from the same project.

With Flutter 2:

With Flutter 3:

I'm trying to get some help from the analyzer team.
dart-lang/sdk#49421

[stevemessick]

@talalong @jukrb0x @vladislav06 Does your project show any Dart analysis errors?

As reported in the Dart issue linked above, this problem does not occur with the master channel of Flutter. If you are comfortable using master, then you might give it a try. I don't know when the next Flutter release will be, though.

[talalong]

@stevemessick There is no error on Dart analysis.
Switching to the master channel doesn't help as well.

[stevemessick]

It seems nothing has changed in this part of the analyzer recently, and my issue is not reproducible by analysis server engineers. So, the Dart issue I linked earlier may be irrelevant.

@talalong I can't reproduce your problem with master. I was using a version with Dart "-262." then upgraded and got "-265." now. But my indent guides are fine with both. Can you attach some screen shots for us?

We'd like to see:

• The Flutter preferences page showing the version of Flutter used by the IDE, since it might be different from the command line.
• The Dart Analysis window, after pressing the red-arrow icon to restart it, and letting it finish.
• The Flutter Outline window with associated code.

Here are examples:

[talalong]

@stevemessick here are the screenshots you need.

[stevemessick]

@talalong Thanks for the update! Everything looks good. I'm puzzled why the indent guides do not show up. What other plugins have you installed, aside from Dart and Flutter?

[talalong]

@stevemessick I have many other plugins installed for the other projects in other languages. But having them disabled except Flutter, Dart and Kotlin (enabled by default) does not solve the issue. I've tried to create a new project with master channel, but still the same issue.

[stevemessick]

@talalong Thanks, that was what I wanted to know about plugins. Could you enable verbose logging in the Flutter preferences page, then restart the IDE, let indexing and analysis finish, and attach the log file here? You can get the log file from Help > Show Log in Finder. Thanks!

[talalong]

@stevemessick here you go.
idea.log

[stevemessick]

Thanks @talalong but there wasn't anything in the log. Do you have multiple Flutter projects? If so, do you want the settings to be different in them?

[talalong]

@stevemessick Do you mean there wasn't anything related to the issue or the file is empty? I can see a lot of warnings in the log.
I only have two Flutter projects but they are just simple demo applications. I want the settings to be the same for all Flutter projects.

[talalong]

@stevemessick I just found out one interesting point while creating a new project. If I choose Kotlin and Swift (instead of Java and Objective C like I did for the demo project above) for Android and IOS, then the indent guide is showing.

[stevemessick]

choose Kotlin and Swift

That's bizarre, but now I can reproduce the problem.

[stevemessick]

This is mostly for my own information, in case I get time to come back to this.

WidgetIndentsHighlightingPassFactoryRegistrar.registerHighlightingPassFactory() is called during project open processing, but way too early for us. The modules have not been created yet, so we can't know that the project has a Flutter module or not. If Kotlin is used in the Android module (I did not try iOS) the highlighting passes are re-created after the project has been fully initialized. And in that case the indent highlighter works.

[echogit]

Hi, has this issue being solved? I'm using the latest Flutter and VS Code and even with the settings item "Editor > Guides: Indentation", the option "Controls whether the editor should render indent lines" is checked,

Flutter 3.13.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 6c4930c4ac (15 hours ago) • 2023-10-18 10:57:55 -0500
Engine • revision 767d8c75e8
Tools • Dart 3.1.4 • DevTools 2.25.0

[parlough]

Hi @echogit, this is the repository for the Flutter IntelliJ plugin, so you may get better help on the https://github.com/Dart-Code/Dart-Code repository.

However, after a quick search, it looks like the DartCode plugin has an experimental setting you can try that enables something similar in VS Code: https://dartcode.org/releases/v3-1/#preview-flutter-ui-guides