Flutter — Be fast, use shortcuts

Using shortcuts will make your work much faster. This article will help you speed up your working process and become more efficient by removing unnecessary clicks and mouse movements all over the screen.

Note: This article is created for developers who are using Android Studio in combination with macOS. Of course, there will be some shortcuts that I may have missed, so please point them out in the comment section below. In any case, you can always see the full list of default keybindings here.

Time is Money.
— Benjamin Franklin

Characters legend

⌘ Command (or Cmd)
⇧ Shift
⌥ Option
⌃ Control
← → ↓ ↑ Left/Right/Down/Up arrow
⏎ Enter/Return

The very basics

Keywords: #Run #Debug #Format #Documentation #CodeForm

These shortcuts are a must for me, they make my development easier and faster.

⌃ + R => run selected configuration
⌃ + D => debug selected configuration
⌘ + \ => Flutter hot reload— I would recommend changing this shortcut to ⌘ + S. For me, it’s more intuitive, as this is a shortcut you will probably want to use a number of times
⌥ + ⌘ + L => reformat code with Dartfmt
⌘ + D => copy and paste line into new row

Tip: You can always press ⌘ + , to see or update your shortcuts for IDEA or even for plugins that you’ve installed.

Widgets

Keywords: #Wrapping #Insert #Remove #Move #WidgetSelection

⌥ + ⏎ => wrap the selected widget with others. However, if the select widget has the childrenproperty. However, if the selected widget has the childrenproperty, then you will be able to use the moving and remove options
⌥ + ↑ => it will do an extended selection, which means that you can select the whole widget code
⌥ + ↓ => it is the opposite of the above shortcut, it will deselect the widget code quickly

Tip: Did you know that you can install a plugin which will remind you to use shortcuts and track your statistics?

Navigation

Keywords: #Forward #Stucture #Finder

double ⇧ => find the file by name
⇧ + ⌘ + F => find in the path — find code anywhere in project/directory/file
⌥ + ⌘ + ← => move to the back cursor position
⌥ + ⌘ + → => opposite from shortcut above
⌘ + ↑ => open structure dialog for current directory

Tip: Did you know that you can install a plugin which will forbid you to use any action which has a shortcut.

Extraction

Keywords: #Extract #Widget #Function #Method

⌥ + ⌘ + M + text selection=> extract selected code to the method
⌥ + ⌘ + W => extract selected widget inside the same file

Tip: Did you know that with this plugin, you will always know where the end of the widget, method, or class is? It’s making your brackets colorful.

Code generation

Keywords: #AutoGenerator #Override #Imports

⌥ + ⏎=> if an element is not imported then you can use this shortcut to add necessary imports to the file. There are other possibilities like adding override members. This shortcut can be used for creating functions/variables which are not declared
⌘+ N => generate some of the basic but popular functions for e.g. constructor, getter, setter, hash methods, to string methods

Tip: Currently, there is no possibility to extract one widget to a new file, but with the installation of this plugin, you can use ⌥ + ⌘ + E to do it.

Test

Keywords: #Unit #Integration #Widget #Testing

If you are inside [your_file_name]_test.dart , you can run all tests, groups of tests, or only one test. Just place your cursor on a block of code that you want to run/debug and press one of these commands:

⇧ +⌃ + E => run tests/group of tests/test
⇧ +⌃ + D=> debug tests/group of tests/test

Tip: Do your shortcuts kata. [1]

Other

Keywords: #Selection #Cursor #Comments #History

⇧ + ⌥ + ←/→ => fast code selection (try pressing ←/→ faster and faster)
⌃ + ⌘ + G => select all matching text inside the file
⇧ + ⌥ + ↑/↓ => move up/down the line where the cursor is placed
⇧ + ⌘ + ←/→ => makes a selection from the cursor position to start/end of the line
⌘+ ⇧ + V => clipboard history
⌥ + text selection => column selection (you need to hold ⌥ while you are moving the mouse)
⇧ + F6 (+ fn if you don’t see F keys)=> put cursor to class, variable, methods which you want to rename
⌃ + tab => file switcher — with this shortcut you will be able to switch between recent files
⌘ + R + text selection => replace a selected part of the text with something else
⇧ + click on different place=> select text between two cursor positions
text selection + ⌘ + / => comment whole text with //

Conclusion

It’s your personal choice to use it or not, but you will definitely be more efficient on a daily basis.

Footnote

[1]: One technique I use frequently is the repetition of simple exercises such as the Bowling Game or Prime Factors. I call these exercises kata. There are many such kata to choose from.

A kata usually comes in the form of a simple programming problem to solve, such as writing the function that calculates the prime factors of an integer. The point of doing the kata is not to figure out how to solve the problem; you know how to do that already. The point of the kata is to train your fingers and your brain.

I’ll do a kata or two every day, often as part of settling in to work. I might do it in Java, or in Ruby, or in Clojure, or in some other language for which I want to maintain my skills. I’ll use the kata to sharpen a particular skill, such as keeping my fingers used to hitting shortcut keys, or using certain refactorings.

Think of the kata as a 10-minute warm-up exercise in the morning and a 10-minute cool-down in the evening.

— Robert C. Martin (Uncle Bob), The Clean Coder: A Code of Conduct for Professional Programmers, Chapter Professionalism