Skip to main content

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!

Popular posts from this blog

Dart in 2016: The fastest growing programming language at Google, 2nd fastest growing in TIOBE Index

Dart was the fastest growing programming language at Google in 2016 with millions of lines of code written. It also made it to TIOBE Index Top 20 this month (see TIOBE's methodology).

It takes time to build something as ambitious as Dart and, in some ways, Dart is still in its infancy. But we're glad the hard work is starting to pay off.

Many thanks to our amazing community!

We're going to celebrate by ... releasing 1.22 next week (as per our usual 6 week release schedule).

AngularDart is going all Dart

Until now, the multiple language flavors of Angular 2 were written as TypeScript source, and then automatically compiled to both JavaScript and Dart. We're happy to announce that we’re splitting the Angular 2 codebase into two flavors – a Dart version and a TypeScript/JavaScript version – and creating a dedicated AngularDart team.

This is amazing news for Dart developers because:

The framework will feel more like idiomatic Dart.It will make use of Dart features that couldn't work with the TypeScript flavor. It will be faster.
This is equally great news for our TypeScript and JavaScript developers, by the way. Cleaner API, performance gains, easier contributions. Read more on the Angular blog.

Angular 2 for Dart is used by many teams at Google. Most famously by the AdWords team, but many other Google teams build large, mobile-friendly web apps. Some of the top requests from these teams were: make the API feel like Dart, provide a faster edit-refresh cycle, and improve applicat…

The new AdWords UI uses Dart — we asked why

Google just announced a re-designed AdWords experience. In case you’re not familiar with AdWords: businesses use it to advertise on google.com and partner websites. Advertising makes up majority of Google’s revenue, so when Google decides to completely redo the customer-facing front end to it, it’s a big deal. The Dart team is proud to say that this new front end is built with Dart and Angular 2. Whenever you asked us whether Google is ‘even using Dart for anything,’ this is what we had in mind but couldn’t say aloud. Until now. We asked Joshy Joseph, the primary technical lead on the project, some questions. Joshy is focusing on things like infrastructure, application latency and development velocity, so he’s the right person to ask about Dart.Q: What exactly did we launch on Monday?It’s a complete redesign of the AdWords customer experience that is rolling out slowly as a test to a small initial set of advertisers. The most noticeable thing is probably the Material Design look and f…