Top 5 Best Live Templates for a Flutter/Dart Developer

Once you’ve mastered a programming language, what should be your next goal ?

After observing developers for a decade in the realm of mobile app development, it’s evident that when senior developers achieve mastery in a programming language, they instinctively seek ways to enhance their productivity.
This pursuit is often driven by the necessity to complete features promptly, even if they’re constantly interrupted by their co-workers !

Perhaps this article has caught your attention for this very reason.

One of the most straightforward methods to boost productivity is through the utilization of Live Templates (or Snippets, if you’re utilizing Visual Studio).
While numerous Live Templates are readily available in your IDE, the beauty lies in the ability to craft your own.

Here are the top five templates I frequently employ when working on Flutter apps while using Android Studio/IntelliJ

If you don’t know how to add a custom Live Template to your IDE, I wrote a quick tutorial about it after this Top list.

Top 1 :
Are you tired from typing out ‘for’ loops repeatedly over the years? Use itar.

Creates a classic for loop over an array

Top 2 :
Simplify method creation with mt.

Eases the method creation

Note that you can navigate with the Tab key of your keyboard to jump between each declaration (return type, method name, params etc..)

Top 3 :
Swiftly set up unit test files with uclass.

Generates the whole content to write your first unit test

Top 4 :
Handle exceptions effortlessly with tc.

The simplest template here, but one of the most useful

Top 5 :
If you’re using a library like json_serializable which generates code to easily convert a model to a JSON Object, use this jsonSer live template !

My personal favourite one, a lot of boring code automatically written for me

How to add those custom Live Templates to your IDE ?

Please note that the following instructions are for IntelliJ/Android Studio. If you’re using VS Code please refer to this link, and note that you’ll have to adapt the code written above.

The process is pretty straightforward.

1. Open your IDE and go to Settings > Editor Tab > Live Templates
2. Create a new Template Group to store all your custom entries by pressing the “+” on the top right and give it the name you want (here, Custom)

3. Select your newly created group, and press the “+” button again to select “Live Template”

4. Apply a Context to your Live Template. To do so, click on the button “Define” at the bottom of the screen, and then pick “Dart”.

About the scope, if the only selected checkbox is “Statement” for example, your live template will be accessible inside methods only. This is useful to limit the number of templates being displayed when you start to write down your code. If you’ve got a limited number of templates, you can select everything.

5. Last step, fulfill the fields of the Live template, and you’re good to go !
Abbreviation : the shortcut to write in your IDE to trigger your live template
Description : the description which will be displayed in the list of the live templates
Template text : the code of your template as shown in the first part of this article

Thank you if you reached this far in this article ! 😍
I hope that it’ll help you in your daily life as a developer.

I’m Florian DUHEN, technical expert and Flutter enthusiast.
You can find me on Github and StackOverflow
I work in a French company, norsys, which can be followed on LinkedIn and Twitter.

Feel free to ask any question or add any note in the comment section, I’ll do my best to answer it all.