Flutter: How to improve your code readability through code blocks and file templates

We all know that things can get messy when writing code. You have an idea, you write it down, you discard parts of it, you have another idea, you add a quick fix to the previous idea, and all over sudden your code looks like a minefield. In this post, I am presenting methods to create a cleaner and more structured Flutter code by organizing code into different code blocks. While this post is specifically targeting Flutter, most of the key points should easily be transferrable to other languages also.

Grouping things together (Code Blocks)

At some point in each coding lecture or coding lesson, all of us were taught about different types of visibilities of methods, fields, attributes, constants, and so on. We are all aware that these things exist. However, as mentioned above, if we want to try something quickly, we usually ignore the good habits and write things down where we think they fit best (which is usually the section of the code we are starring at).

Grouping by logical functions

Members are grouped in logical code blocks
  1. Logical functions of members are different for almost every class. This means that there is no common element or structure where a reader could find something familiar in this code. (Also when we think about IDE support, trying to automate the grouping with the help of an IDE is next to impossible — see below)

Grouping by type

Members are grouped by their type

Grouping by visibility

Lastly, the next strategy to create meaningful code blocks is grouping code by visibility. A while ago, I started to consequently organize my source code in visibility blocks (and spoiler alert — it is amazing). Each code file that I create has a public member block, a private member block, a constants block, a constructors block, a public methods block, and a private methods block. In my code, each of these blocks are opened by a big comment to indicate that everything below that comment is belonging to a new block is starting now. To be honest, at first this looked to me like a lot of boilerplate code comments, but after working with this for a while, it is really something that I wish every code I am looking at would have.

An example of a structured class using visibility code blocks

Your IDE can help you with this

Yes, that is right! Your IDE is a powerful tool. But how can it help us to consequently group our code into code blocks? As mentioned above, we are doing this for grouping your code in visibility blocks. Here, your IDE can support you by autogenerating visibility blocks whenever you create a new file by using file templates. So whenever you create a new class, it will look like this:

An autogenerated class containing visibility blocks using a file template.
Changing code templates in Android Studio
Changing code templates in Android Studio
Create user snippets in VS Code
You can define a user snipped to auto-generate the visibility blocks
By pressing CTRL+Space now the blocks are available for your file

One more thing: Show and hide blocks when you don’t need them

As a final suggestion for using code blocks (not just for visibility blocks but also for logical or type blocks), you can use regions. In Android studio this is very simple (and can even be integrated into your new file template). Just add the following region code surrounding your code for the current visibility block:

//#region public
// your code here
//#endregion public
Now regions can be folded away if you don’t need them

Dr. Markus Funk holds a PhD in Augmented Reality. He is a UX and programming specialist and likes to use technology creatively. More: www.makufunk.de

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store