New To Flutter? Check Out These Simple IDE Shortcuts | Desuvit

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. Instead of spending the entire day matching opening and closing brackets, you can use the following IDE shortcuts to make development in Flutter a notch easier and quicker.

You are not alone in this landscape, there are various other people who are just starting to use Flutter. Many developers who have already explored the Flutter Framework have offered some shortcuts. Here’s a list of these shortcuts. Start reading!

Some Flutter Shortcuts You Need To Know

Are you willing to cut-paste and copy-paste more easily?
Do you want to select the whole widget?
Do you wish to move your widgets down or up?

Of course, there’s a time-consuming way to complete all these tasks. But, we have some simple Flutter shortcuts to achieve these tasks in much less time which can increase your productivity.

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.

stless

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

stateful widget

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. Mutipurpose CTRL + . (Dot)

We can use CTRL + . for many other interesting shortcuts.
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 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.

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. Organize 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.

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 mouse 3 times to select the entire line. 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.

8. Eliminate Unused Imports

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 optimized 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

Many IDEs allow 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

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

Summary

We 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, Desuvit can assist you! We have been in the industry long enough to watch Flutter Framework grow to what it is today. Through our industry experience and knowledge, Contact us to create a robust, agile, and feature-rich application.

Enjoyed this article? Subscribe for more valuable and great content !

Enter your email address below to get new articles with valuable content delivered straight to your inbox, plus special subscriber-only content to help you with your next mobile app or software development project.

By subscribing, you agree with our privacy policy and our terms of service.