Introduction: This is a fine article translated by Lao Meng, and the ownership of the article belongs to the original author.
Welcome to join the old Meng Flutter communication group and translate 2-3 paid articles every week.
Original address: medium.com/flutter-com…
If you are a beginner to Flutter, you must have an aversion to nested structures, how difficult it is to add or remove a widget in your code, or to find out where a widget ends and begins. You then need to spend an entire day matching the left and right parentheses. But you’re not alone, because we’ve all come this way. It took us a while to figure out shortcuts, and maybe you don’t have to figure them out anymore because I’ve already done them; And I’ve compiled all these shortcuts that can be developed faster and more smoothly in Flutter.
PS. All of these shortcuts work with Android Studio and IntelliJ for Windows. Are you from iOS? Maybe this article will help.
Create a new Stateless or Stateful component
Guess what? You don’t have to manually write the widget classes and override the build functionality. IDE can do it for you!
Simply type stless to create a stateless widget, as follows:
Or enter stful to create a stateful widget:
What if you’ve created a stateless widget and added many child levels, but realize that you’ll eventually need a State? Should you make a new StatefulWidget and then manually transfer all the code to that code? Don’t have to!
You can place the cursor on the StatelessWidget, press Alt + Enter, and click Convert to StatefulWidget. All boilerplate code is automatically created for you.
You can do more amazing things with Alt + Enter
Alt + Enter is a wand used to speed up development in Flutter. You can click on any widget, press Alt + Enter, and see what options that particular widget has.
Add Padding to the component
Suppose you have a widget that is not a container, so it has no padding property. You want to populate something, but you’re worried about messing up your widget structure. Using our magic wand, you can add padding without messing anything up:
Simply press Alt + Enter on the widget you want to fill, then click “Add Padding”. Now you can change the default population to the desired population.
Center component
It’s nothing special. It simply puts the widget in the center of the available space. This doesn’t work in a column or row.
Wrap with a Container, Column, Row or any other Widget
You can wrap widgets in containers in the same way. Therefore, newContainer is now the parent of your widget.
Or, you can even wrap multiple widgets with “columns” or “rows” with one click!
Or wrap them with any other widget:
You even use StreamBuilder to wrap child components:
Don’t like a component? Delete it
Yes, removing a widget is as easy as adding a new one.
Easily copy and paste or cut and paste a line of code
You can easily cut/copy a line of code by holding the cursor at the end of the line, then pressing Ctrl + X or Ctrl + C to paste and paste as usual (Ctrl + V)
Ctrl+X
Ctrl + C
View the source code for the widget
That’s the best thing about open source frameworks. If you want to see behind the scenes of an amazing widget or class, simply place your cursor over it and press Ctrl + B. This link will act as a link directly to your Widget’s source code, where you can read all about it. Flutter also provides good documentation by using comments to explain much of its code.
Check the properties of the widget without leaving the file or tag
Quickly select the entire widget
Many times we need to extract/delete entire widgets and then try to select them manually:
If it’s a very large widget, figuring out which parentheses belong to which widget can be confusing, and we don’t want to mess up our entire structure.
In times like this, I like to use this super useful shortcut.
Simply click the widget you want to extract, then press Ctrl + W. The entire widget was selected for you, and your cursor did not move an inch.
Formatting code
Sometimes your code just messes up. Something like this:
For someone like me, some OCDs look at code without proper indentation, which can be a nightmare.
Today, most ides have this capability (although maybe not the same key combination). Just press Ctrl + Alt + L to fix the indentation and reformat the code.
View your UI outline
Most of our widgets have only one child on the tree. They have their own children’s trees, and many more children. If the child nesting of your Widget is as small as four depths, it will be difficult to understand the structure of the code just by scrolling through it. Luckily, we have Flutter Outline to save us!
You can find the Flutter Outline on the far right of the IDE; It is one of the vertical tabs located above the Flutter Inspector. When you open it, it looks like this:
Now you can clearly see which widgets, how they are arranged in the user interface, and which widgets have other child widgets. Very simple!
Extract the code into the method
The Flutter Outline is a very useful tool. You can use Alt + Enter to do most things, such as wrapping columns and centering widgets, but there are many more great features under the Flutter Outline TAB! One of them is the Extract Method button.
If you feel that the widget you’re writing is too long and probably should be a custom widget, instead of manually converting the code to methods, you can use this tool to do the magic for you!
Move the widget up and down
Another crazy thing that Flutter Outline can do is to easily reorder a widget if it has multiple children:
You can also move only one line up or down by pressing Shift + Alt + up/Down keys
Refactoring renaming
This is a very basic tool that most ides have. This allows you to rename methods, widgets, classes, or file names, and make sure references to that method are also renamed. Simply use Shift + F6 and type the new name:
Delete unused imports
So, you’re working on a project and importing a lot of files, but your code gets better and better as time goes by. Eventually, you may no longer need a lot of these imports. Now you can push the code into production, but you need to clean it up and remove all those unused imports. Maybe you usually delete them manually, but since I’m trying to simplify your life, here’s a nice keyboard combination: Ctrl + Alt + O
I don’t remember anything
If you, like Filip Hracek here, sometimes forget his shortcuts, we’ll offer you this important trick. Simply press Ctrl + Shift + A and type the desired shortcut.
That’s all the shortcuts I know so far. Be sure to check back often for more tips, tricks and other goodies!
Am I missing the mythical shortcut? Leave a comment below!
My post is free, but did you know you can clap👏 50 times? The higher you go, the more it inspires me to write more for you!
communication
Old Meng Flutter blog address (330 controls usage) : laomengit.com