Flutter gutter icons to not show for widgets inside conditional expressions

[PhoenixLeeSin]

newer to flutter ans VS, in my mac it can show flutter icons when write code, but it can not show in left ...
I searched a lot of information but didn’t find the answer

flutter : Flutter 1.22.5 • channel stable
dart: 2.10.4 (stable)
VS: 1.54.1

Any suggestions are appreciated~~

[DanTup]

I've not been able to repro this, the same icon shows up here:

If you paste the following simple code into your file somewhere, does it show there?

const a = const Icon(Icons.keyboard_arrow_up);

Does it not show up in any files or just some specific ones?

[PhoenixLeeSin]

@DanTup
in my project it not show up in any files but it show correctly code is const a = const Icon(Icons.keyboard_arrow_up);

[DanTup]

@PhoenixLeeSin are you able to trim your file down to something small you can share that still shows the problem? Perhaps with the same code I can reproduce it.

[PhoenixLeeSin]

@DanTup oh.....when i init a new flutter project, icons shows in left!!!!

i do not konw why....

[DanTup]

@PhoenixLeeSin can you try copying exactly the same code (ideally the whole file) into the small test project, and see if the same occurs there?

[PhoenixLeeSin]

@DanTup thank u reply, when i copy the whole file it occurs error..
It’s a small mistake, but it does make me uncomfortable sometimes
whole file :

import 'package:flutter/material.dart';

class ScalableBox extends StatefulWidget {
  final List<Row> visibleSpans;
  final List<Row> unVisibleSpans;

  const ScalableBox({Key key, this.visibleSpans, this.unVisibleSpans})
      : super(key: key);
  @override
  _ScalableBoxState createState() => _ScalableBoxState();
}

class _ScalableBoxState extends State<ScalableBox> {
  bool _isMore = true;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(10, 0, 0, 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          widget.visibleSpans.length >= 1
              ? widget.visibleSpans[0]
              : Container(),
          widget.visibleSpans.length >= 2
              ? widget.visibleSpans[1]
              : Container(),
          widget.visibleSpans.length >= 3
              ? widget.visibleSpans[2]
              : Container(),
          Offstage(
            offstage: _isMore,
            child: Column(
              children: widget.unVisibleSpans,
            ),
          ),
          widget.unVisibleSpans.length > 0
              ? Container(
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        _isMore = !_isMore;
                      });
                    },
                    child: _isMore
                        ? Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Text(
                                '展开',
                                style: TextStyle(color: Colors.blue),
                              ),
                              Icon(
                                Icons.keyboard_arrow_down,
                                color: Colors.blue,
                                size: 16,
                              )
                            ],
                          )
                        : Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Text(
                                '收起',
                                style: TextStyle(
                                  color: Colors.blue,
                                ),
                              ),
                              Icon(
                                Icons.keyboard_arrow_up,
                                color: Colors.blue,
                                size: 16,
                              )
                            ],
                          ),
                  ),
                )
              : Container(),
        ],
      ),
    );
  }
}

[DanTup]

@PhoenixLeeSin thanks! I was able to trim this down and it looks like it might be caused by the ternary operator:

I'll see if I can find a way to handle this. Thanks!

[PhoenixLeeSin]

Thanks u Reply~

[DanTup]

@bwilkerson this fails because I'm using the Flutter Outline data to locate icons, and for code with conditionals the then/else expressions are flat. This code:

return Container(
  child: true ? Icon(Icons.keyboard_arrow_down) : Container(),
);

Produces an outline like:

"children": [
	{
		"element": {
			"range": /*...*/,
			"name": "Icon(Icons.keyboard_arrow_down)",
			"kind": "CONSTRUCTOR_INVOCATION"
		},
		"range": /*...*/,
		"codeRange": /*...*/
	}
]

I had a look at handling this, and have a possible fix here (which supports conditionals both in child expressions and in widget lists):

https://dart-review.googlesource.com/c/sdk/+/192688/

Although I don't know if it's the correct/best fix. The conditional is not shown in the tree, so it looks a bit like a flat list even when some pair of the child nodes could be exclusive. Perhaps an additional node could be inserted, although it would add more to the tree (if/else in collections do not currently do that, they're just flattened, so this does match them).

WDYT?

[bwilkerson]

I remember asking the question about if and for elements in the flutter outline when we were first implementing support for them, and I seem to remember that we decided to use a flat representation because we didn't have a good answer for the question of what to do when one branch would be represented in the outline and the other wouldn't.

I think that the solution in the referenced CL lgtm.

[DanTup]

This is fixed by dart-lang/sdk@387e9d9. The fix ships in the Dart SDK (not the VS Code extension), so will show up only once you're on a newer SDK that includes that change.