Shortcut to extract Flutter widget from UI layout
I'm updating this answer for both Android Studio and VS Code
Android Studio
Method 1
Shortcut keys:
- Windows/Linux: Put your cursor on the widget name and press Ctrl+Alt+M to extract it as a method or Ctrl+Alt+W to extract it as a widget.
- MacOS: Put your cursor on the widget name and press Option+Command+M to extract it as a method or Option+Command+W to extract it as a widget.
You can also accomplish the same thing by right clicking the widget name and choosing Refactor > Extract from the context menu.
Method 2
You can also extract a widget into a method or new widget from the Flutter Outline menu.
- Click Flutter Outline on the top left side
- Select the widget in the outline
- Right click and choose Extract method... or Extract widget...
- Give it a name
Visual Studio Code
Put your cursor on the widget name and press Command+. on a Mac or Ctrl+. on a PC. Then choose Method or Widget from the context menu.
To Extract particular code of Flutter in Android studio to varialbe
, constant
, method
, or as a Widget
.
1. Select a code block you want to extract.
2. Right click -> Refactor -> Extract -> Select type of refactor you want.
Shortcuts
vary as per your Android studio configuration but shortcuts are also written over the there too ease your task.
In my case Ctrl+Alt+W
hotkey in Android Studio didn't work. To fix it just open Keymap Settings and re-set this hotkey - Android Studio will remove conflicting shortcuts and it became work.
You can do this easily with command Alt+Enter.
In this post it is very well explained.