How to surround flutter widget in vscode

user_9784141 0
Viewed 49248

Just wondering if there is a shortcut or extension in visual studio code to surround a code block - or more specifically highlight the widget name and then surround that widgets children.

Often is the case where I have created, lets say a:

Padding(
  padding: EdgeInsets.all(10.0),
  child: Container(
  ...

But then after some writing, i want to surround that Padding with something else, like a Column or Row. As is, I need to prefix the Padding with Row( child: and then scroll down and add the new ),` bracket

Is there not a way to just select the Padding and then tell vs code that I am going to prefix this so add the bracket for me?

Pretty sure I have seen this in action in IntelliJ

flutter visual-studio-code
9 Answers

Sure!

Vscode offer a few refactor options, including Wrap with Column:

enter image description here

Just right-click on a widget and press "Refactor".

user_83942650

Place your cursor in the widget you want to edit and use CTRL + . shortcut to see the options. Use CMD + . for MacOS. That will do it.

user_35725460

⚠️ If wrap with Column is not shown on Right-click - refactor:

  • on Window : Ctrl + .
  • on MacOs : ⌘ + .

Then Right-click > wrap with Column

Here is the reason why this happen: https://dartcode.org/docs/refactorings-and-code-fixes/ . Also documented there: you can now bind shortcuts to the refactor actions:

Ctrl+. in Code opens the “lightbulb” menu showing all code fixes/refactors. Code v1.20 gained the ability to keybind quickfixes. To do this you should edit your keybindings.json file and include the ID of the refactor as found below.

user_138330040

On VS Code on Windows just right-click on any widget and press "Refactor" or use the keyboard shortcut

Ctrl+Shift+R

user_28696690

If any one looking for Android Studio its option + return in Mac and Alt + Enter in Windows.

user_18162680

Right click on the widget and choose 'refactor', then 'wrap with new widget'

user_60652340

In Ubuntu VSCode it is also ctrl + . where as in Ubuntu Android Studio or Intellij it was alt + enter.

user_94816130

Simply press: Ctrl + dot on windows or Command + dot on mac

and a list pops up showing wrapping options!

user_61208790
  1. Click on the widget
  2. Press CTRL + SHIFT + R
user_134337200
Related