Flutter: Establishing coding standards in your team

Crizant Lai

Jul 22, 2020·3 min read

Update on 16/11/2020: import_sorter just released 4.3.1, which provides us a way to sort only a subset of files rather than sorting all of them. We can integrate it into our workflow more nicely, see the updated lefthook.yml at the end of this article.

As the team size grows, coding standard is very important to maintain an easily understood and consistent codebase. In this article I will share how I setup and integrate it into my workflow.

Choosing linting rules

Flutter comes with a code linter in the SDK, all you have to do is create a file analysis_options.yaml in your project root, you may find all the available rules here: Linter for Dart.

If you are too busy too choose your own rules, you may use mine:

Besides, flutter community style guide and effective dart are both very good options. You may import an existing analysis_options.yaml as a starting point, then override some of the rules like:

include: package:effective_dart/analysis_options.yaml

linter:
  rules:
    public_member_api_docs: false

After that, run code linting by:

flutter analyze

If you use Visual Studio Code like me, you may install the flutter extension and the result of linting will be realtime updated in the terminal.

Sorting imports automatically

For large projects there may be lots of import statements on top of some files, it would be easier for the eye (and for managing, or course), to sort them alphabetically.

import_sorter is doing a great job here, install it then run:

flutter pub run import_sorter:main

And boom! All your import statements will be categorised and sorted like:

// Dart imports:
import 'dart:async';
import 'dart:io';
import 'dart:js';

// Flutter imports:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/physics.dart';

// Package imports:
import 'package:intl/intl.dart';
import 'package:mdi/mdi.dart';
import 'package:provider/provider.dart';

// Project imports:
import 'package:example_app/another_file2.dart';
import 'another_file.dart';

It does have some flexibility for you to config, in case if you want to ignore some files, or want to add emojis in your files.

Formatting the code

Flutter comes with a code formatter in the SDK, here is how to use it:

flutter format lib

If you use Visual Studio Code, you may turn on the following setting:

"editor.formatOnSave": true,

Integrating with the Git workflow

It feels very dumb for us to run the three commands every time we do git commit, so we are going to automate the workflow.

Install lefthook, which is a fast and powerful Git hooks manager for projects of any languages:

# for Mac and brew users:
brew install Arkweid/lefthook/lefthook# or you may find the installation method here:
https://github.com/Arkweid/lefthook/blob/master/docs/other.md

After that, navigate to the root of your project, run:

lefthook install

This command will patch your .git/hooks folder to insert some scripts to it. Note that it is done locally and will not be pushed to your git server, so you need to do it once on every development machine.

You may notice that there is a new file called lefthook.yml, let’s open it and modify the content to (or customise it to suit your needs):

Try committing any changes by git, you should see the commands are executed automatically, and it blocks the commit if any of the commands failed.

Conclusion

So this is how you could enforce coding standards in your flutter projects, what do you guys think? Feel free to tell me if it helps, or if you have any ideas to further improve it.

Do you know you can clap up to 50 times for an article? Go smash that button!