Ways to Generate Code for Dart & Flutter #1

Hello all! This series of articles is designed to systematize and update knowledge to actively gain direction of code generation for the Dart & Flutter stack.

Code generation can be used in a large number of directions. Still, I divided them into several main ones: Generating models and DTOs, generating API queries, generating routing, generating UI, generating ViewModel, generating logic, and streamlines, generating services, and frequently used elements. You can use different methods or their combinations to generate code.

Here is also a list of the main code generation methods:

• Flutter Build Runner and related tools;
• Dart/Python scripts for generating code;
• Live Templates / User Snippets of your IDE;
• File / Folder Generation also from your IDE.

Build Runner — a toolkit for code generation in Flutter

Live Templates / User Snippets — code generation templates in your IDE. Live Templates in Android Studio and Intellij Idea and User Snippets in VS Code.

File / Folder Generation — templates for generating files or folders embedded in the IDE.

The number of ways to generate and the number of methods is big, so the first thing you need to do is organize them and decide where to use them. Let’s talk about each direction separately.

• Generation of Model and Dto.
• Route generation in the application.
• API request generation.
• ViewModel generation.
• Logical elements generation.
• Generating services and other “singleton” classes.
• Generation of frequently used items.
• UI generation.

To understand which method of generation is more suitable, you need to understand each method of code generation’s differences, advantages, and disadvantages.

The main feature and significant advantage of using Build Runner is code support. This method doesn’t generate code from some template. It adds logic to the already written elements. For example, in the case of models and do, you don’t have to write the functions “toJson,” “fromJson,” “toString,” etc. These methods are generated by themselves and will be updated whenever you change the parameters of the model.

Using Live Templates and User Snippets allows you to insert pre-prepared snippets of code by entering a keyword. This method is not as dynamic as the previous one, but it will enable you to write code much faster. We often use the same snippets and constructs anyway, so this method can significantly speed up development.

File / Folder generation can create a folder with the necessary files at once, saving a lot of time. The most famous example is generating BloC folders in Flutter using VS Code.

Dart/Python scripts for generation allow you to close all the non-standard situations which are not convenient to solve with other methods. This method is the most universal but at the same time the most complex.

So. Where and what to use?

Model and Dto — To generate Models and Dto code, the most effective way is to use Build Runner and packages based on it. The best known are json_serializable and freezed.

API queries: To generate API queries, Build Runner and code generation with it are just as good. A well-known example is Retrofit + Dio, or bindings built on Injectable.

Route: For this direction also well suits Build Runner, and there are ready-made solutions for generating routing. For example — “auto_route”.

It is easier for a generation of ViewModel to use “Live Templates / User Snippets” because there are no packages for easy generation of ViewModel based on UI.

Logical elements — by logical elements, I mean “Action, Reducer, State and Epic” for Redux architecture and “Event, BloC, State” for BLoC architecture. In this case, it is more complicated and can not be said unambiguously. We have two ways:

• The first is to use folder generation + Injectable to create all Redux and BLoC elements and connect them to a common state. This combination is right for BLoC and average for Redux.
• The second is to use folder generation + custom packages to connect Redux and BLoC to a standard state management system.

For the generation of “Singleton” classes already created an excellent package based on “GetIt,” which simplifies working with them — “Injectable.”

Everything is simple for frequently used elements — use “Live Templates / User Snippets” and do not know the sorrow.

UI generation — this direction is more complicated, and it divides itself into several more. Code generation based on the design. There are a large number of different extensions and services for this generation. I advise you to try such plugins for Figma as — “Figma to Flutter: Easy Export to Flutter” and “Figma to Code: iOS, CSS, Flutter.” The second method is to use scripts to create a blank app from JSON. I don’t know of any public scripts with this functionality at the moment.

These are not all the methods you can use, but they are enough to cover almost all needs. In addition to these methods, you can use AutoHotKey and Automator for Windows and Mac, respectively. If you find this topic interesting, you can elaborate on it in the next article. And remember, the important thing is not how you automate your work, but whether you do it or not.