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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)