Announcing Dart 2.3: Optimized for building user interfaces

Michael Thomsen
Dart
Published in
5 min readMay 8, 2019

Today we’re announcing the stable release of the Dart 2.3 SDK, with new language features that improve your coding experience when developing user interfaces, new tooling support for developing Flutter UI, and two new websites: dart.dev & pub.dev.

Dart’s momentum

One of the developer research reports we look forward to every year is the StackOverflow Developer Survey, which provides a comprehensive dataset on developer trends and sentiment towards different technologies. This year’s edition demonstrated the growth in popularity and awareness of Dart, which entered the list of Most Loved Languages for the first time and ranked alongside other popular languages like JavaScript, C#, and Go and ahead of the likes of C++, F#, and R. At the same time, our good friends in the Flutter community were ranked third in the list of Most Loved Frameworks. Last month’s Codementor survey on which programming languages to learn and not to learn had similar positive news:.

Two examples of languages that really rose to the occasion for the title of Most Improved are Dart and Ruby”. Codementor, April 2019 [source]

We’d like to extend a big thank you to all developers in the Dart community. It really means a lot to us to see you adopt Dart, offer your feedback, and continue the journey with us as we attempt to build the best client-optimized language for fast apps that run on any platform.

New language features for building user interfaces

Speaking of client development, one of the longstanding joint projects between the Dart & Flutter teams is creating great support for capturing user interface code using Dart, without needing a markup language. We think that using a single language for both behavior and layout has large benefits. These include reducing context switching, not having to learn two languages, and allowing all of the abstraction features of a general-purpose programming language when building your UI.

We’ve made several improvements over the last few releases, such as simplifying code for constructing widgets, adding automatic int-to-double conversion, and adding set literals. In Dart 2.3 we take another big step forward, with three new features for expressing UI that is list-based, conditional, or repeated.

You can think of a UI as a tree of widget nodes. Some nodes contain lists of widgets — for example a list of scrollable elements. Often, these lists are built from other lists. For that, we have added a new spread operator feature for unpacking the elements from one list into another. In the following example, buildMainElements() returns a list of widgets, which is then unpacked into the surrounding list using the spread operator :

Dart sample code using the spread operator

Another common UI task is to include a specific element based on a condition. For example, you may want to include a Next button on all pages but the last one. With Dart 2.3, you can do this using a collection if:

Dart sample code using collection if

Finally, UIs often build repeated elements from other repeated elements. You can express this using the new collection for feature:

Dart sample code using collection for

And because the three new features are language features, and not markup commands, they are fully composable, and can be used in any context where you work on collections. The features are included in the Flutter 1.5 release, and are available in the Dart 2.3 release, which you can download today. We’ve also added new lints that you can configure in static analysis to enforce using the new spread, collection if, and collection for features.

For details on all the work that was done to add these features, check out this recent post from Bob Nystrom (aka munificentbob), an engineer on the Dart language team.

We’d also like to extend our gratitude to the developers who participated in the UX studies that were critical in shaping these new language features.

IDE & editor features

In keeping with Dart 2.3’s UI theme, we’ve also added a new UI Guides feature to our IDE support. UI Guides are horizontal and vertical lines drawn within UI code, making it much easier to see the tree structure of Flutter UI build() methods. Here’s an example (from a Calculator app) where the UI Guides clearly illustrate that the UI is built from an Expanded Column containing several KeyRows, each of which contains NumberKeys.

IDE with UI Guides visualizing the tree structure of UI code

UI Guides are available in version 35.2 of the IntelliJ IDEA and Android Studio plugin. To enable the feature, choose the setting Preferences > Languages & Frameworks > Flutter > UI Guides. We hope to offer similar support in VS Code in a later release.

Finally, we’ve observed that developers often use code completion in their IDE as a way of exploring APIs. Code completion has worked well for exploring the APIs in the libraries that you’ve already imported, but it hasn’t been available for APIs in libraries that aren’t yet imported. Our tools can now support the latter use case: you can invoke code completion on any prefix, and you’ll see completions for all APIs in the current package, the packages it directly depends on, and the SDK. If you choose a completion from a not-yet-imported library (marked Auto import, as the following animation shows), then the tool adds the import statement for you.

Animation showing code completion & automatic import adding

This new auto-import feature is available in VS Code with the v2.26 plugin, in IntelliJ 2019.1, and the upcoming Android Studio 3.5 release.

New Dart & Pub websites

Last, but certainly not least, we’ve been very busy the last few months building a new website for the Dart platform: dart.dev

Redesigned https://dart.dev homepage

This new site features an entirely new landing page, focused on explaining the core benefits of the Dart platform. We’ve also updated the documentation pages to have better navigation and more visual appeal. Lastly, we’ve done a huge reorganization of all content to make discovery easier, and added new pages for core content that was missing before.

In a similar vein, we’ve visually updated the Pub package site, and we’ve moved it to a convenient new URL: pub.dev.

We’d love to hear your feedback on both sites. If you find a problem or have a suggestion, please create an issue in the dart.dev issue tracker or the pub.dev issue tracker. Thanks for your support!

--

--

Michael Thomsen
Dart
Editor for

Product Manager working on Dart and Flutter. Helping developers is my passion!