New To Flutter? Check Out These Simple Visual Studio Code IDE Shortcuts

If you have started working on Flutter only recently, then you must be facing issues with its nested structures, the method to remove/add a widget, or the place where different widgets end. These are standard time confusing tasks that the developers do every day.

So how to be efficient?

Learn IDE shortcuts. That will help you do routine tasks very quickly.

So in this newsletter issue, I wanted to focus on developers. And here are some top Visual Studio Code IDE shortcuts that I find quite helpful in day-to-day coding. Although some of these shortcuts are flutter specific, few of them apply to any programming language.

Some Flutter Shortcuts in Visual Studio Code You Need To Know

1. Make Widgets

It is not always necessary to manually create every widget class, you can simply use the IDE shortcuts for it.

Type stless if you want to make a stateless widget.

Windows: stless?

Mac: stless?

Similarly, you can type stful to make a stateful widget.

Windows: stful?

Mac: stful?While the above shortcuts are amazing, what will you do to convert a stateless widget to a stateful widget?

After creating a stateless widget and adding many children to this widget, you may find the need to use state. But, there’s no need to start again and make a stateful widget again.

Go to your stateless widget, bring your cursor on it, and use CTRL + . (dot). This will offer you an option to Convert to Stateful Widget. Your code will automatically adjust to a stateful widget.

2. CTRL + . (Dot)

We can use CTRL + . for many other interesting shortcuts.

Windows: CTRL + SHIFT + R?or CTRL + .

Mac: CTRL + SHIFT + R

Here’s what you can do:

• Bring your cursor to a widget and use CTRL + . to find out different options related to that widget.
• If you have a non-container widget, then this widget may not have any padding. To offer padding to the widget without messing up the structure, you can use CTRL + . to add padding.
• When you have available space, you can use CTRL + . to even create a widget. But, remember this will not work in a row or a column. Similarly, we can remove any widget with the help of this IDE shortcut.
• We can also use CTRL + . to wrap a container around a widget. In fact, the same method helps wrap rows and columns around a widget.
• Using this option, you can also shift your widget code to the method without manually executing the steps. This is beneficial when your widget is too long and you have realized that it should be a custom widget.

3. Check The Source Code

A valuable feature in the Flutter framework is the ability to check what is actually happening. For example, it is easy to check the source code of a widget by just taking your cursor to the widget and using CTRL + Left Mouse Click.

Windows: CTRL + Left Mouse Click??or??F12 .

Mac: CMD + Left Mouse Click??or??Fn + F12.

This will help you check the source code of a widget. You will also find many comments in the code that helps you understand the code.

4. Organise Code Structure

It is possible that your code is just all over the place. Although there is nothing wrong with the code and its functioning, it doesn’t have a proper indentation. For this, you can use ALT + SHIFT + F. This will allow reformatting your code automatically.

Windows: ALT + SHIFT + F

Mac: OPTION + SHIFT?+ F?

5. Select a Widget

Let’s say you need to remove the whole widget but it is a large widget. So, what do you do?

You need to first figure out the closing and opening brackets and then remove the widget carefully to avoid ruining the structure.

For this, click the mouse 3 times to select the entire line and then click on the closing brackets by clicking Shift. You need to click on your widget and use this shortcut to select and remove the widget.

6. Check UI’s Outline

It is obvious that your code has widgets with multiple children. Often there are more than one child and a tree of children after this. This nested structure can be hard to traverse, but we can use Flutter Inspector for the same.

Using Flutter Inspector, you can check the entire widget tree in a clean format.

7.?Up Down Widget Movement

You can also rearrange and organize your widgets. Just use ALT + Up or Down to move up or down the line.

Windows: ALT + Up or Down

Mac: OPTION + Up or Down

8.?Remove Unused Imports

?Windows: ALT + SHIFT + O

?Mac: OPTION + SHIFT + O

A lot of developers may relate to this situation.

You are working on an important project, so you imported many files. However, with time, you optimize your code and you don’t really need many of these imports.

Before pushing the app to production, you need to clean up the code. For this, use ALT + SHIFT + O to eliminate unused imports without manual efforts.

9.?Rename Refactor

This is one of my favorite shortcuts as it allows one to quickly rename classes, methods, and variables. The more readable the code the better, and oftentimes one needs to (and should) rename it to reflect the correct intent of the code. This shortcut makes it a breeze and removes friction to rename things in the code.

Windows: F2?

Mac: Fn + F2 ?

Many IDEs allow the renaming of class, widget, method, or file name. You can press F2 to change the name of a class, widget, or method.

10. Go to line Number

Windows: CTRL + G

Mac: CTRL + G

You can directly go to any line number by using Ctrl+g and typing the line number.

Summary

I have discussed some extremely valuable IDE shortcuts for Flutter that help with faster development. If you are finding it hard to remember all these shortcuts, then just type CTRL + K + S to open a search and type the name of the shortcut you are looking for.

If you require help in Flutter-based development or consulting support, I can help you with it! We have been in the industry long enough to watch Flutter Framework grow to what it is today. Through our industry experience and knowledge, we can assist you to create a robust, agile, and feature-rich application.?

---------------------------------------------------------------------------------------------------------

Got questions or any technical challenges ? Need help in developing a Digital SaaS solution, mobile app (Flutter/React Native), or web app? Send me a DM. I will be happy to take up a call to help you!

• Reach out to me for a free 30 min discovery call: https://calendly.com/desuvit/30min
• Send me an email: [email protected]
• Contact us
• Visit our?website
• Estimate your project

Until next time,

Sunil Khatri