Flutter IDE Wish: Define a Stateful/Stateless widget class

There are several basic bits of widget class boilerplate that Flutter app developers are likely to write repeatedly: define a stateless widget class, define a stateful widget class. It’s also common to start with a stateless widget and then convert it to a stateful widget later on. Finally, when a Stateful widget class is defined, you may want to have it create an AnimationController.

The IDE could generate the boilerplate automatically. Perhaps, in some cases, it could also automatically convert a stateless widget to a stateful one (and back).

The boilerplate for a stateless widget Foo

class Foo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(); // YOUR CODE HERE
  }
}

The boilerplate for a stateful widget Foo

class Foo extends StatefulWidget {
  @override
  _FooState createState() => new _FooState();
}

class _FooState extends State<Foo> {
  @override
  Widget build(BuildContext context) {
    return new Container(); // YOUR CODE HERE
  }
}

The boilerplate for a stateful widget Foo, with an AnimationController:

class Foo extends StatefulWidget {
  @override
  _FooState createState() => new _FooState();
}

class _FooState extends State<Foo> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(); // YOUR CODE HERE
  }
}

[scheglov]

We implemented a Quick Assist (activated using Alt+Enter) to convert StatelessWidget to StatefulWidget.

[stevemessick]

Here’s a possible solution that I’d like feedback regarding usability. If this is usable we can build this, and others, into the Flutter plugin.

The basic idea is to create a custom live template that expands into the definition of a new StatelessWidget subclass. Open Preferences/Settings and search for the Live Templates page. Here’s what mine looks like when finished.

Getting there requires a few steps.

• First, create a new template group by clicking the + (under “Reset” on the right side) and select option 2. Call it “Flutter”.
• Select it and click the + again.
• Choose option 1. You can put anything you want in the <abbreviation> field. I chose “stless” (more about that later).
• Give it a description like “Stateless widget” that will show up in the menu.
• Paste your expansion code into the text pane.
• Change “Foo” to “$SELECTION$” and insert “$END$” where the user should start typing.
• At the bottom click the Define button next to “No applicable contexts yet.”
• Expand Dart and select the Other beneath it. (This is a bit flakey, I think. I had to deselect Dart and reselect Other to eliminate statement applicability.)
• Click OK to save the new template.

You can use the template in two ways: select the template from a menu or type “stless” and hit Tab. Your cursor needs to be outside a class definition for the template to be available.

If you type “stless<tab>” the template will be expanded and your cursor will be left at the position of the new class name. If you select the template from a menu then you can get an additional shortcut by typing the name of the new class, selecting it, then selecting the template from the menu (Cmd-Opt-J on Mac or Cmd-Opt-T on Mac). Cmd-Opt-J has the advantage of putting stless at the top of the list. Once the template is expanded your new class is defined and the cursor is left in the arguments of new Container().

I know it is asking a lot to have someone experiment with this. But if this is actually useful it would be simple to add templates for all the suggestions in this issue to the Flutter plugin.

Also, $SELECTION$ can appear multiple times. Here’s the output of a Stateful widget template (after reformatting):

class LongComplexFlutterClassNameThatGetsTypedOnce extends StatefulWidget {
  @override
  _LongComplexFlutterClassNameThatGetsTypedOnceState createState() =>
      new _LongComplexFlutterClassNameThatGetsTypedOnceState();
}

class _LongComplexFlutterClassNameThatGetsTypedOnceState
    extends State<LongComplexFlutterClassNameThatGetsTypedOnce> {
  @override
  Widget build(BuildContext context) {
    return new Container();
  }
}

/cc @sethladd @mit-mit