Tutorial

Tips for speeding Up Flutter Development

Published on September 16, 2019
Default avatar

By Joshua Hall

Tips for speeding Up Flutter Development

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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 {
  @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.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Joshua Hall

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel