Tips for speeding Up Flutter Development

Even with all the benefits of Flutter, everything has its downsides. Flutter can either be a breeze with an ever growing supply of widgets and packages, or it can be a mess of repetitive typing and hour long games of ‘find the missing bracket’. We will go over some things to help lessen the growing pains of learning this new technology.

For the sake of brevity we’ll be mainly looking at what’s available for VSCode. Although other editors may be the same or have their own equivalents.

Native Tricks

The keybindings for these are going to differ depending on the editor, but they are available in VSCode and Android Studio.

Trailing Commas

The simplest way to keep your code formatted is to just add a comma to the end of any line so the editor reformats it into a nested tree-like structure. I wouldn’t recommend doing this with every line since a lot of brackets and extreme nesting can sometimes be more confusing than keeping some things inline.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[Row(children: <Widget>[Container(child: Center(child: Text('I\m some text'),),),],),],);
  }
}

Is reformatted to…

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              child: Center(
                child: Text('I\m some text'),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Refactor Tools

Instead of manually cutting out everything, making a widget, and pasting it back in every time you need to go back over your work, which is a lot, VSCode offers some nifty refactoring tools to handle that for you.

You just need to place the cursor inside the widget’s name and hit the little light bulb that will appear for more options to add a column, extract it into its own separate widget, or to remove it altogether. You can either center the cursor, right click and look for refactor, or use Ctrl+Shift+R.

View Source Code

One great way to understand how flutter works, besides the docs, is to look at the Flutter source itself. The Flutter team has created an extremely well commented codebase for everything that you use. This can be very helpful when you want to know what arguments a particular widget takes and what’s being done with them, or to just figure out why you’re getting a specific error.

Just hold Ctrl and click on the widget you want to inspect.

Extensions

Bracket Pair Colorizer

This will use different colors to differentiate between sets of brackets. It will save you endless amounts of frustration from having to figure out where a particular widget starts and ends.

Pubspec Assist

Gone are the days of going over to the docs, finding the dependency or latest version number you want, and copy/pasting it into your pubspec.yaml file every time you need something. Now you can use Crtl+Shift+P, activate Pubspec Assist, and just tell it what you want.

Flutter Files

To avoid the amount of repetitive typing just for basic boilerplate, Flutter files give you some extra options when you right-click on a directory. It may give you more than you need sometimes, but it’s still much easier to trim out what you don’t need than writing everything yourself.

Awesome Flutter Snippets

The less I have to type the happier I am. This little collection can seem like a godsend at times when you can’t remember exactly how to make a stateless widget or a build method.

For a full list of options, check out their repo.

Conclusion

While there will always be an endless supply of ways to take shortcuts and automate the repetitive tasks, hopefully this could be a helpful introduction into some of the most common.