Shortcut to extract Flutter widget from UI layout

Question

If I have a complex layout that I want to simplify, what is the shortcut in Android Studio (or IntelliJ) to extract the widget out into a method?

Example:

I want to extract the three main widgets in the Stack.

class BodyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/image.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Align(
          alignment: Alignment(-0.7, -0.7),
          child: Container(
            height: 300,
            child: RichText(
              text: TextSpan(
                text: 'My text',
                style: TextStyle(
                  color: Colors.white70,
                  fontSize: 30,
                ),
              ),
            ),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Text(
            'Some other text',
            style: TextStyle(
              color: Colors.white70,
              fontSize: 20.0,
              fontWeight: FontWeight.w900,
              letterSpacing: 5.0,
            ),
          ),
        ),
      ],
    );
  }
}

I could do it by hand but I'm looking for a shortcut.

Answer 1

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

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.

Answer 2

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.

Answer 3

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.

Answer 4

You can do this easily with command Alt+Enter.

In this post it is very well explained.