https://medium.com/flutter-community/flutter-ide-shortcuts-for-faster-development-2ef45c51085b
If you’re new to Flutter development then you must be cribbing about the nested structures, how hard it is to add or remove widgets from the middle of the code or how hard it is to find where one widget ends and another begins. Then, you spend your whole day matching opening brackets to their closing ones, or at least trying to. You’re not alone, we’ve all been there. It took time for us to figure out the shortcuts, but maybe you won’t have to go through that because I’m at your service; and I’ve curated all those shortcuts that allow for faster and smoother development in Flutter.
this article will help.
Creating a new Stateless or Stateful widget
Guess what? You don’t have to manually write your widget classes and override the build functions. The IDE can do it for you!
stless to create a Stateless Widget like this:
stful to create Stateful widget:
StatefulWidgetand then manually transfer all of your code over to it? You don’t have to!
Convert to StatefulWidget . All the boilerplate code will be created for you, automatically.
Yay!
More magical things you can do with Alt+Enter
widget . I.E.:
Add a Padding Around a Widget
Padding without messing anything up:
Add Padding And now you can modify the default padding to be whatever you want.
Center a Widget
This does not work inside a Column or Row.
Wrap with a Container, Column, Row or any other Widget
Container becomes your Widget’s parent.
Row in just one click!
Or wrap them with any other widget:
Bhavik Makwana for telling me about it.
Don’t like a widget? Remove it with the Magic Wand.
Yes, removing a widget is just as easy as adding a new one.
Easily copy-paste or cut-paste a line of code
Ctrl+V )
Ctrl+X
Ctrl+C
Sanal Kv who taught me this in the comments. :)
See the Source Code for Your Widget
Ctrl + B . It will act as a link, taking you straight to your Widget’s source code where you can read everything about it. Flutter also uses comments to explain a lot of its code, making for great documentation.
Check Your Widget’s Properties Without Leaving the File or Tab
Ctrl+Shift+I to get a quick look at the Widget’s constructor.
Quickly Select an Entire Widget
A lot of times we need to extract/remove an entire widget and we try to manually select them:
If it is a really large widget, then figuring out which closing bracket belongs to which Widget can be pretty confusing and we don’t want to mess up our entire structure.
At times like these, I like to use this super helpful shortcut.
Ctrl+W. The entire Widget is selected for you without your cursor moving an inch.
Fix the Code Structure
Sometimes your code will just be a mess. Kind of like this:
For people like me who get a little of OCD looking at code that doesn’t have proper indentation, this can be a nightmare.
Ctrl+Alt+L to fix your indentation and reformat code.
Smooth
See an Outline of Your UI
Flutter Outline to come to our rescue!
Flutter Inspector. When you open it up, it looks like this:
Now, you can clearly see which Widget is where, how they’re arranged within the UI and which widgets have other children widgets. Easy peasy!
Extract code into a method
Extract Method button.
Fourth button here
If you feel like you’re writing a Widget that’s getting too long and should probably be a custom Widget, then instead of manually shifting the code into a metho, you can just use this tool to do the magic for you!
Move Widget Up and Down
Flutter Outline is if you have multiple children in a widget, you can easily rearrange their order:
Filip Hracek for this tip.
Refactor Renaming
Shift + F6 and type in the new name:
Remove Unused Imports
Ctrl+Alt+O
I can’t remember anything, Pooja
Ctrl+Shift+A and type in the shortcut you need.
That’s all the shortcuts I know for now. Be sure to check back often for more tips, tricks, and other great stuff!
Ganesh .s.p.