// Tutorial //

Tips for speeding Up Flutter Development

Published on September 16, 2019
Default avatar
By Joshua Hall
Developer and author at DigitalOcean.
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.

main.dart
class App extends StatelessWidget {
  
  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 {
  
  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.

Refactoring Example

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.

Flutter Source Code

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.

Colored Brackets Example

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.

Pubspec Assist Example

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.

Flutter Files Example

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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment