Flutter extract widget requires a return widget

Question

I am getting a lot of widgets groups in the tree and wanted to start extracting them to their own widget.

I tried with Ctrl-Alt-W, this command does nothing and shows no error when there is a problem.

If you go to the top menu and click on refactor, extract, extract to widget the following error occurs:

Can only extract a widget expression or a method returning widget.

This is an example of the code I am trying to extract:

                     Expanded(
                          child: Container(
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  left: 8.0,
                                  right: 8.0,
                                  top: 8.0,
                                  bottom: 4.0),
                              child: new TextField(
                                decoration: new InputDecoration(
                                    border: new OutlineInputBorder(
                                      borderRadius: const BorderRadius.all(
                                        const Radius.circular(10.0),
                                      ),
                                    ),
                                    filled: true,
                                    hintStyle: new TextStyle(
                                        color: Colors.grey[800]),
                                    hintText: "Supervisor",
                                    fillColor: Colors.white70),
                              ),
                            ),
                          ),
                        ),

How would I modify this code in the widget tree to have a return so that it can be easily extracted.

Thanks

Answer 1

I don't think this is a bug. Everyone says that you have to highlight all of the code to extract it, and it worked with them, but for me, I've made it like this.
First I put the cursor at the specific widget.

Answer 2

Ensure Two Steps:

1. Your Code is 'Dart Formatted' (if using AndroidStudio, else regular formatted with appropriate commas if using VSCode), and
2. Your Cursor is at the beginning of the widget code block that you want to extract as a widget. Cursor position is the only problem here. Even after selecting the entire code block, if we right click while cursor is somewhere in the middle of the code block, refactoring and widget extraction wont work.

Dont select the block, only ensure that cursor is at the first letter of the block. Then -> right click -> refactor -> extract widget and voila! It will work. Thanks. Happy Coding!