It is a well known fact that keyboard shortcuts can help us a lot while developing, especially when you have a lot of code to go through and you have to find the opening and closing brackets or insert a new widget or remove one. Time is precious and I find these shortcuts help me a lot in coding in flutter. I became a fan of VS Code mainly because it’s so light weight and opens much faster than other IDEs I have worked with and have a ton of features and customizations along with extensions which can do wonders (This is just my personal opinion).

If you use Android Studio and IntelliJ in Windows, I would recommend you to read this great article or if you use mac you can check out this article.

First of all I hope you have Dart and Flutter Extensions enabled, if not you can get them from here : Dart and Flutter.

Now let’s jump into the shortcuts and see what all wonders we can do.

Keyboard Shortcut List

Firstly, I will provide you the shortcut to get all the shortcuts.

I won’t be able to explain all the default shortcuts in this article since the list is huge. You can find the list of default keyboard shortcuts and also search for shortcuts by using CTRL+K+S as seen below:

Ctrl+k+s will show you all keyboard shortcuts

Or you can also use Ctrl+Shift+P to Show Command Palette with the recently used commands or also to search commands.

Show Command Palette

Or you can take a printout of all the default VS Code keyboard shortcuts from here. You can get the official dart custom shortcut list from here and flutter vs code extension documentation.

Code Assist or Code Completion

While coding, this is one of the important tools especially for beginners or if you get stuck somewhere and want to check for options, you can use Ctrl+Space to get a list of curated code completion options.

Code Assist — Ctrl+space

Quick Fix or the Magic Wand

For faster development in flutter you can use the quick fix tool with is Ctrl+. , it helps in fixing the code with some additional requirements without messing with your code or your widget structure and giving you less headache of manually correcting everything. Let’s see some of the examples

Quick Fix Options

As you can see below, when on any widget you can click Ctrl+. to find the quick fix options.

Quick Fix Menu — Ctrl

Let’s explore the menu items one by one :

1. Extract Local variable

You can extract an existing widget and make it a local variable and magically the widget will be replaced by the variable, wherever it is used.

Extract Local Variable

2. Extract Method

What if you have got a lot of code and you want to split it to different methods. It would even given you a generated name for whatever code you want to split.

Extract method

But I would advice against splitting widgets to methods, instead you should create a new class as it has a lot of impact on performance, you could refer this article to know in depth why widgets should not be split into methods. You can do this easily using the next menu.

3. Extract Widget

This can come a lot in handy if you want to split your widgets into smaller widgets. Hope by now you know about the importance of splitting widgets to smaller widgets and it’s impact on performance 😉.

Just click on any widget and then click Ctrl+. and click Extract Widget option and give a name for the new widget and click Enter and that’s it.

Extract Widget

4. StatelessWidget to StatefulWidget

Now let’s say, you wanted a StatefulWidget , but this process only gives you a StatelessWidget , but there is a cool way to convert the StatelessWidget to StatefulWidget , may be by this time you would have guessed it…

Yes, you just have to click the StatelessWidget and click Ctrl+. and then “Ta Da” as if it’s magic you will get an option Convert to StatefulWidget click on that and that’s it 😍

StatelessWidget to StatefulWidget in a click

5. Add padding

Adding padding to an existing widget is much more easier with the quick assist tool, just select Add padding and you will get padding around your widget without messing up your widget structure.

Add padding

6. Center widget

This is used to wrap it with a center widget, thus centers your widget.

Center widget

7. Wrap with Column, Container, Row, StreamBuilder, new Widget

You can use this same technique to wrap your required widget with a Column or Container or Row or StreamBuilder or any other widget or even custom widgets, to make that as your parent widget of the required widget.

Wrap with Column

But, unlike the same tool in android studio, you cannot select multiple widgets to come under a column, as of now that feature is not available.

Multiple Children Wrap with Column

You can also wrap with any other widget or a custom widget