Flutter is a great framework for building cross-platform mobile apps. Over the past few weeks I’ve been transmuting my existing Android experience to Flutter. The process has been relatively painless, thanks in part to the stellar documentation and example code on the Flutter website.

However, one of the immediate downsides in Flutter development at the moment is the lack of any pre-configured file templates included when using Android Studio with the Flutter plugin. This meant a lot of boilerplate type, which was especially disappointing coming from Android where something like adding a new Activity sets a flurry of automated file creation in motion.

Fortunately, some trial-and-error fiddling produced a few useful file templates, which will hopefully allow your future fingers to get some well-deserved rest as well.

Just give me the templates!

Download Zip of all the templates from the gist here

Unzip and place all the .dart files in your Android Studio ‘config\templates’ directory. On Windows mine is C:\Users\Alex\.AndroidStudio3.1\config\fileTemplates

files in your Android Studio ‘config\templates’ directory. On Windows mine is Restart Android Studio to load the new templates

Right click a project folder and select the new Dart or Flutter template to use

Input the file name using the Dart file naming convention of lowercase_with_underscores

Profit! The class name uses the correct UpperCamelCase naming structure automatically.

Read on to find out about these different templates and how they work.

Android Studio Templating

Apache Velocity is the engine used by Android Studio to transform a file template into a project file. It supports a number of useful features for templating, such as:

Asking us for a filename and other custom variable names when creating a new file from a template

Predefined variables like package names, project names and current date-time variables

Substituting predefined and custom variables into template files

Simple scripting using valid Java expressions

In addition to adding template files directly to the config\templates folder, we can manually add and edit file templates through Android Studio

Right click a project folder and select New > Edit File Templates

The File and Code Templates window will appear.

window will appear. Select an existing template to edit it in the editor window.

Or, use the green plus to add a new template, give it a name and a file extension, and start typing!

Basic Dart Class for Dart Naming Conventions

The only file template included currently with the Flutter plugin is a single ‘Dart File’ template, which is completely empty. So, our very first challenge is a template that allows us to create a file containing a named Dart class.

Dart language naming conventions specify that file names should be written in lowercase_with_underscores, but class names should be in UpperCamelCase . Often when creating a file we want the file name and the primary class name in that file to reflect each other. For example, when we want to create a class called MyHomScreen , we likely want to put it in a file called my_home_screen.dart .

The easy solution is to have Apache Velocity ask us for both a filename and a class name when creating a template. But that means typing nearly the same thing twice, and ain’t noboby got time for that! Velocity scripting to the rescue.

Using the following template, we can take the lowercase_with_underscores filename provided and convert it to the equivalent valid UpperCamelCase class name.

How does it work?

Any reference to a variable in Velocity starts with a dollar sign: $

$NAME is a predefined variable representing the file name input by the user

is a predefined variable representing the file name input by the user Use #set() to declare a variable and set its value

to declare a variable and set its value Using standard Java string methods, the file name is split on underscores, each split part is capitalised, and the parts are joined together to make the class name

Stateless and Stateful Widgets

Read enough Flutter documentation and you’ll start to see the phrase ‘everything is a widget!’ in your dreams. But it’s true, everything is a widget, you’ll create lots of widgets when writing a Flutter app, and that means lots of opportunities for file templates to save you typing out widget boilerplate. I’ll leave the Flutter documentation to explain what stateless and stateful widgets are, but here are some templates.

Stateless Widget Template

Stateful Widget Template

JSON Serializable Support

When we want to deserialize JSON in Flutter we should always use a code generation library in order to avoid the probable bugs that come from writing deserialisation by hand. However even code generation libraries like the json_serializable package come with their own bits of boilerplate.

Templating to the rescue once more! Now you don’t need to remember how to spell serializable ever again. (How can it have so many syllables for relatively few letters? And it suffers from US/UK spelling differences! What a frustrating word.)