Wednesday, December 7, 2016

Enhancing the Flutter developer experience

At the Dart Developer Summit we introduced our fast and powerful Flutter developer experience. But our ambitions don’t stop here, so we have been hard at work developing several updates that further improve the experience.

Faster startup during development


Hot reload means you only have to launch your app once; after that changes are simply reloaded into the running app. But even that initial launch should be really fast. Previously we used a loader application to bootstrap the device with your application sources. Thanks to recent improvements made to the reload engine inside the VM this is no longer necessary and your application will be booted immediately, and you will see the real launch experience of your app.

IntelliJ improvements


We have published an update to our IntelliJ plugin, version 0.1.6 that has several exciting changes:
  • Launching the app with hot reload support (see details below)
  • A new flutter action pane has been added on flutter.yaml files (see details below)
  • Keyboard shortcuts were added for hot reload and restart:
    • Hot reload: ctrl \ or ctrl alt ;
    • Restart: ctrl shift \ or ctrl shift alt ;
  • Flutter doctor now prints out the IntelliJ plugin version numbers
  • Improved the robustness of starting and stopping program runs

Launching the app with hot reload support


We have updated the behaviour of the IntelliJ Run and Debug buttons to both launch the app with Hot Reload support. If you want to run without hitting breakpoints, click the ‘Run’ button. If you want to trigger breakpoints, click the ‘Debug button’. 


Flutter specific action bar on flutter.yaml files


A custom action bar has been added for flutter.yaml files. This allows you to upgrade your flutter installation, and to run the doctor command for troubleshooting. 


Updates to reload semantics


In Todd and John’s Dart Developer Summit talk they discussed the semantics of hot reload. Since giving the talk there have been some important updates that refine the semantics of reload to improve the developer experience.

Const fields are always reloaded


Changes to fields that are marked const can now be reloaded. For example:

   const animationDuration = const Duration(seconds: 1);

*reload*

   const animationDuration = const Duration(seconds: 2);

After the reload animationDuration will have the duration of two seconds. You can keep making changes and each time you reload, your program will use the updated value.

New instance fields have their initializing expressions run

When you add a new instance field with an initializing expression, the VM will run that expression and assign the result to the instance field for all instances of the class. For example:

   class Foo {
     ...
   }

*reload*

   class Foo {
     ...
     String myTitle = ‘My Title String’;
   }

After the reload all instances of Foo will have the new field myTitle and it will contain ‘My Title String’. This is different than John and Todd’s talk which said myTitle will contain null.

When are initializing expressions run?

Initializing expressions are run as the last stage of a hot reload. Note that the call stack may not be empty. After we have safely performed the reload we find all instances of the class and run the initializing expression and store the result in the field. The VM will do this for all classes that received new fields but in no particular order.

Initializing expressions with side effects

Your initializing expressions can have side effects but the VM does not run the initializing expression against instances in a particular order. In other words, you cannot guarantee that a certain instance will have the initializing expression run before any other instance.

Initializing expressions that throw

If an initializing expression throws we log that it threw and leave the field as null.

Updating and feedback


To try out these enhancements, please update your flutter IntelliJ plugin (you should be prompted in IntelliJ; if not, select the menu item IntelliJ > Check for updates... and upgrade from there.). Next update your flutter installation by running flutter upgrade in a terminal, or by using the flutter.yaml action bar discussed above. 

Should you see any issues, or have suggestions or enhancement, please let us know in the issue tracker!