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.

  1. Click Flutter Outline on the top left side
  2. Select the widget in the outline
  3. Right click and choose Extract method... or Extract widget...
  4. Give it a name

enter image description here

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.

enter image description here

2. Right click -> Refactor -> Extract -> Select type of refactor you want.

enter image description here

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.