Add context menu option to "comment out widget"

[matthew-carroll]

When I'm hacking or prototyping with Flutter I occasionally want to comment out one or a few Widgets within a Widget tree. This allows me to verify that certain effects are happening the way that I think they are by temporarily commenting out unrelated Widgets.

Example:

Start with:

new Widget1(
  child: new Widget2(
    child: new Widget3(
      // params
    ),
  ),
);

Comment out the 2nd widget:

new Widget1(
  //child: new Widget2(
    child: new Widget3(
      // params
    ),
  //),
);

I'd like a context menu option that allows me to comment out one or more Widgets in the middle of a tree. This can't be accomplished with the traditional "CMD+/" because the closing braces won't be commented out and then it becomes very difficult to find the corresponding braces.

[jacob314]

@scheglov

[jacob314]

This could also be interesting to implement on the context menu clicking on a widget in the inspector.
Do you also find it useful to be able to hide Widget2 and its descendants instead of just Widget2?

[matthew-carroll]

I would definitely like to be able to comment out multiple Widgets at once. So, imagine the earlier example was 5 widgets deep. Maybe I'd like to comment out 2, 3, and 4. But I probably wouldn't want to comment out all the descendants because I'm probably debugging some visual artifact that occurs between a high level widget and one of it's lower descendants.

[pq]

Great suggestion!

Have you tried IntelliJ's extend selection action (⌥↑ on the mac)? This gets you part of the way there...

That is, something like.

1. put cursor in widget declaration
2. repeat ⌥↑ until the widget(s) is selected
3. ⌘/

Maybe a more generic "select widget" action would help?

[matthew-carroll]

Yeah I think a dedicated action would be preferable, if possible. I can remember a handful of shortcuts, but only if I use them every day. This one is infrequent enough that I'd have to look up that key combo every time.

[scheglov]

Do you want to use // comment, or /* will work just as well?

For example in this code:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Center(child: Container()),
    );
  }
}

...it is impossible to use // to comment out Center as is.
We would have to split the existing single line into multiple lines and only then comment out lines:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
//      child: Center(
          child: Container()
//      ),
    );
  }
}

Or we could use /* directly:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: /*Center(child:*/ Container()/*)*/,
    );
  }
}

Given the stated goal - temporary commenting out code for debugging, it seems to me that using /* would be enough, plus it is more general and less code changing approach. But I might be convinced otherwise.

[scheglov]

Ah, and one more question - what is the difference between commenting out a widget, and removing it completely (for which we already have Quick Assist)? Do you want to be able to see commented out code because it might have hints why something did not work before and works now?

And how will you restore the commented out code? Undo? git revert if undo is to long? Carefully uncomment manually? Expectation that there will be a symmetrical action to auto-uncomment previously commented widget(s) (not that I know right now how to do this :-))?