question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Idea: Extract Widget

See original GitHub issue

How it works: Highlight some widgets in a large widget build tree you’d like to start breaking down. Currently, you can easily extract these as a method in the current class using the “extract method” action. However, I often find myself creating a StatelessWidget out of this selection instead of a method and have to do that part manually. It would be very handy if you could “extract widget”.

This would allow you to create a Stateless Widget, with a constructor and fields that match the necessary params. For example, if you extracted a piece of Code, and it required a Todo with the variable name todo, the StatelessWidget would extract a final Todo todo field and a Constructor to match. The build method would return the contents of your highlighted selection.

After creating the class, it would replace your current highlighted selection with the new MyTodoWidget(todo);

Essentially, this would just be a slightly different extraction than a method.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

4reactions
scheglovcommented, Mar 27, 2018

The feature is implemented. You can extract either a widget instance creation or a method that return a widget. It coverts any read local variables and fields into extract widget fields and constructor parameters.

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new Column(
          children: <Widget>[
            new Text('AAA'),
            new Text('BBB'),
          ],
        ),
        new Text('CCC'),
        new Text('DDD'),
      ],
    );
  }
}

image

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new NewWidget(),
        new Text('CCC'),
        new Text('DDD'),
      ],
    );
  }
}

class NewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Text('AAA'),
        new Text('BBB'),
      ],
    );
  }
}
0reactions
bwilkersoncommented, Mar 23, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

android studio - Shortcut to extract Flutter widget from UI layout
Windows/Linux: Put your cursor on the widget name and press Ctrl + Alt + M to extract it as a method or Ctrl...
Read more >
Extract method | IntelliJ IDEA Documentation - JetBrains
The Extract Method refactoring lets you take a code fragment that can be grouped, move it into a separated method, and replace the...
Read more >
Flutter — IDE Shortcuts for Faster Development - Medium
Just click on the widget you want to extract and press Ctrl+W . The entire Widget is selected for you without your cursor...
Read more >
Shortcut to extract Flutter widget from UI layout - iTecNote
Right click and choose Extract method... or Extract widget... Give it a name. enter image description here. Visual Studio Code. Put your cursor...
Read more >
Introduction to widgets - Flutter documentation
Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found