Flutter — IDE Shortcuts for Faster Development

If you are new to Flutter development then you have to dig into nested constructs, how difficult it is to add or remove sub-widgets in the middle of the code or how hard it is to find where a sub-widget ends and a Another child widget starts. Then you spend all day matching the opening brackets with their closing brackets. It took us some time to figure out the keyboard shortcuts, but it probably won’t take you long to figure it out because I’ll give it to you; and I have arranged all the keyboard shortcuts that allow for faster and smoother development in Flutter.

Create Stateless or Stateful widgets

Guess what? You don’t have to manually write your widget classes and override built-in functions. IDE can do it for you!

Just type stless to create a Stateless Widget as follows:

Or stful to create a Stateful Widget:

What if you created a Stateless Widget and added many subclasses, but then realized that you will need a State eventually? Should you create a StatefulWidget new and then move all your code to it manually? You don’t have to do that!

You just need to put the cursor in StatelessWidget, press Alt + Enter and click Convert to StatefulWidget. All boilerplate code will be automatically generated for you.

More Magical Things You Can Do With Alt + Enter

Alt + Enter is the magic wand you use to grow faster in Flutter. You can click on any widget, press Alt+Enter and see what options you have for that particular extension. For example:

Add padding around the child widget

Let’s say you have a child widget that is not a Container, so it has no padding property. You want to provide some padding but are afraid to mess up your child widget structure. With our magic wand, you can add your padding without messing with anything:

Just press Alt + Enter on the widget that needs padding around it and click Add Padding. And now you can modify the default padding to whatever you want.

Create widgets

This is nothing out of the ordinary. It only centers your widget in the available space. This does not work inside Column or Row.

Wrap with Container, Column, Rown or any other Child Widget

You can use the same approach to wrap your child widget with a Container. So the new container becomes the Widget’s parent.

Or, you can even combine multiple widgets with a single Column or Row in one click!

Don’t like a widget? Remove it with the Magic Wand.

Removing a widget is as easy as adding a new one.

Check your child widget properties without leaving the file or tab

If you want to check out what amazing things your widget can do without leaving your files and digging through the documentation, just press Ctrl + Shift + I for a quick look at the Widget’s constructor.

Quickly select all child widgets

A lot of times we need to separate/delete all child widgets and we try to select them manually:

If it’s a really big widget, figuring out which Widget the closing brace belongs to can be quite confusing and we don’t want to mess up our whole structure.

At times like these, I love using this super useful shortcut.

Just click on the widget you want to split and press Ctrl + W. The entire Widget is selected for you without moving your cursor an inch.

Edit code structure

Sometimes your code will just be a mess. Kind of like this:

Now, most IDEs have this feature, (though maybe not the same keystroke). Just press Ctrl + Alt + L to fix the indentation and reformat your code.

Those are all the shortcuts that I know of now. Be sure to check back often for more tips, tricks, and other great stuff!