New tooling releases - Improved Code completion, New UI-as-Code lints and assists

214 views
Skip to first unread message

Nilay Yener

unread,
Apr 26, 2019, 11:25:37 AM4/26/19
to flutt...@googlegroups.com

Happy Friday Flutter-Dev!

New tooling releases are available, check below for the details!

Improved code completion!

We now show code completion for symbols that are not yet in scope. When one of these completions is selected, we’ll auto-update the imports for the file automatically. Users will need to do a lot less manual maintenance of their imports, and will be able to use code completion to better explore the set of available classes.


In the below example, choosing the top item in the list will add automatically an import for dart:math. To enable completions for other packages just add them to your pubspec.yaml.



This feature is available in IntelliJ 2019.1. It’s not current available in Android Studio stable version (3.4), but will be available in the upcoming Android Studio 3.5.

New UI-as-Code lints and assists

We’ve added several new lints and code assists to aid in using the new UI-as-code language features (spread collections and conditional expressions in lists).


The prefer_spread_collections lint: “Use spread collections when possible. Collection literals are excellent when you want to create a new collection out of individual items. But, when existing items are already stored in another collection, spread collection syntax leads to simpler code.”


The prefer_if_elements_to_conditional_expressions lint: “When building collections, it is preferable to use if elements rather than conditionals.”


The prefer_for_elements_to_map_fromIterable lint: “When building maps from iterables, it is preferable to use for elements.”

Changelog

More details about changes are fixes are available in our changelog.


Nilay Yener

unread,
May 2, 2019, 6:07:06 PM5/2/19
to flutt...@googlegroups.com

New Flutter IntelliJ Plugin feature in the M35.1 release!


Editor UI Guides

To address user feedback on the challenge of seeing widget tree structures from code, we added a new feature called Editor UI Guides in this release. UI Guides help developers better visualize the structure of their widget code, especially in large build methods.


Here’s an example from a Calculator app, where the UI Guides clearly illustrate how the UI is built (from an Expanded Column containing several KeyRow’s of NumberKeys):



Based on feedback from developers who tried the UI Guides in a UX study, we also added visual indicators on the editor’s scrollbar to help developers quickly locate the widget code in a large Dart file:

Since both features are new, they’re not on by default yet. To see them,  enable the ‘UI Guides’ setting in Preferences > Languages & Frameworks > Flutter (see the screenshot below). We encourage you to give it a try! You can send us your feedback at github.com/flutter/flutter-intellij/issues.


Diego Garcia

unread,
May 2, 2019, 8:43:12 PM5/2/19
to Nilay Yener, flutt...@googlegroups.com
Very nice !!!

Kudos :)

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Rabih M. ElBaba (Gmail)

unread,
May 3, 2019, 4:17:42 AM5/3/19
to Nilay Yener, flutt...@googlegroups.com
Hello...

How do I enable this feature in android studio? I am currently using it in PHP editor it called guidelines.

Thank you in advance.

jacobr

unread,
May 3, 2019, 12:33:43 PM5/3/19
to Flutter Dev
Preferences > Languages & Frameworks > Flutter
Check UI Guides to enable the feature in VSCode. Let me know how it works for you.


Thanks!
Jacob
To unsubscribe from this group and stop receiving emails from it, send an email to flutt...@googlegroups.com.

Rabih M. ElBaba (Gmail)

unread,
May 4, 2019, 8:16:53 AM5/4/19
to jacobr, Flutter Dev
How can I enable it in Android Studio?

Regards

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.

Jacob Richman

unread,
May 6, 2019, 5:15:04 PM5/6/19
to Rabih M. ElBaba (Gmail), Flutter Dev
Sorry when I wrote VSCode I meant to write AndroidStudio!

Instructions:
in Android Studio or IntelliJ go to:

Preferences > Languages & Frameworks > Flutter
Check UI Guides to enable the feature . Let me know how it works for you.

Rabih M. ElBaba (Gmail)

unread,
May 6, 2019, 5:32:41 PM5/6/19
to Jacob Richman, Flutter Dev
Sorry, I don't have such as this path in my android studio 3.4, I'm running on windows 10

Regards

Jacob Richman

unread,
May 6, 2019, 5:37:52 PM5/6/19
to Rabih M. ElBaba (Gmail), Flutter Dev
Open the Preferences dialog and search for Flutter. Here is what I see on Android Studio.
Screen Shot 2019-05-06 at 2.35.44 PM.png

Rabih M. ElBaba (Gmail)

unread,
May 6, 2019, 5:38:50 PM5/6/19
to Jacob Richman, Flutter Dev
With reference to the following thread:


It seems the File > Settings is the replacement to Window > Preferences

On Tue, May 7, 2019 at 12:15 AM Jacob Richman <jac...@google.com> wrote:
Message has been deleted

M. Blu.

unread,
Sep 11, 2019, 4:14:33 PM9/11/19
to Flutter Development (flutter-dev)
Oh, I found the solution. There is a letter in the right bottom corner of the suggest-window. I change it to "sort by relevance" and it looks better for me.

CodeCompletion.jpg






Am Mittwoch, 11. September 2019 22:03:31 UTC+2 schrieb M. Blu.:
Hi Nilay,

I have a problem with the improved Code Completion. Since the update I have many duplicate lines in the suggestion. e.g. why I see five times "EdgeInsets.only". Is it possible to group it to show only the parameter? I don't need all the different packages.

CodeCompletion.jpg


thanks

Katleho Motumi

unread,
Oct 3, 2019, 2:51:08 PM10/3/19
to Flutter Development (flutter-dev)
in studio code where can we get
Reply all
Reply to author
Forward
0 new messages