cover-img

This is why I hate Flutter Code Generator

Have you ever heard about a program that can convert a design directly into a flutter code? It sounds fun and easy, doesn't it, but this is why I hate it!

29 November, 2022

7

7

1

In this article, I will discuss a very interesting about automated technology from Flutter technology. Maybe many developers are unfamiliar with this technology because it is a new technology but the level of development is very rapid and fast.
This is proven by the existence of a program that can convert designs in the form of application display images into usable Flutter code. And the author will discuss the conversion technology.

Types of Flutter Code Generators

img

Types of Flutter Code Generator

Flutter Generator code program is quite varied and has various types ranging from design application plugins to programs in the form of web-based applications or both in the form of applications and plugins.
Whatever the type and form, I still don't like it because the results are not much different and I have tried and compared them using an example of a simple login page.
img

My Code result for this test

I'm not talking about the logic function and the backend of systems yet, but only from User Interface has generated quite bad code. What if the backend feature can be generated automatically. of course, the results can be even more disappointing (but I really hope that exists).

First Test | FigmaToFlutter Plugin

img

FigmaToFlutter Preview

This is a Plugin from Figma that can convert from Figma design to flutter code instantly, I say instant with the intention of being really instant, not waiting for a long generate time, it can even be said that in less than 10 seconds, the design has been converted into code.
This plugin also provides a choice of code, I can choose in the form of StatelessWidget or StatefulWidget, whatever code is chosen I can't run it right away because I have to configure the code first, even though it looks like it's just a simple configuration like adjusting const to widgets or adding a key to classes but with a very dense code structure, it is quite a time consuming so it is better to write the code by yourself.
img

FigmaToFlutter Preview

The code generated from this plugin is quite bad because it cannot detect the function as it should, as in the part that should be the input TextField( ) and this plugin only converts it into a Container( ) with a border only which of course cannot input data.
The same thing happens with the ElevatedButton( ) section which is just a Container( ). but in this way, it can still provide a fairly accurate picture of the positioning or styling and I can say that the workings of this plugin are very similar to the CSS code generator rather than the Flutter Code generator.

Second Test | Flutter Studio Web Apps

img

Flutter Studio Preview

Flutter Studio is a website page-based Flutter Code Generator Application, very similar to the Figma application, users only need to assemble the components needed, very similar to assembling Lego blocks.
The customization of the features from this generator application is quite concise and very easy to understand. but from the user experience, this application is very bad because the use feature which only drags and drops makes this application unable to determine its WidgetTree properly.
img

Flutter Studio Result

I spent a lot of time just trying to put the TextField( ) inside the Container( ) widget because there is no option to set the position of each widget and the result keeps getting thrown out of the WidgetTree.
Also, the option to measure the size of the widget is not available and you cannot make the Container( ) size fit because all of its sizes will fill the entire screen.
I have tried my best in putting together each part of this lego but many of the widgets are not as useful as they should be like the Center ( ) widget which I cannot use to make that simple login page without the SafeArea() widget which is not available.
The generated code for this application is better than the first plugin because it doesn't look like a CSS generator and has usable functions. But still, I can't directly use the code because it needs to be configured first.
The widget code it uses is quite outdated and many widgets are no longer supported, so I still have to change some widgets using the latest widgets like the FlatButton( ) widget and others, so for me, it's better to write from scratch.

Conclusion

The two tests above are samples from the many generator codes for flutter that I have researched and I chose these two samples as a comparison with the average generator available.
I'm not against automation of code generation, it's a very good and amazing technological process just like Git Co-Pilot. and from this research, I don't like automation in the form of generators for Flutter code, apart from the "instant" nature of the generated code, which is also very poor quality and lacks up-to-date features.
I'm not saying all flutter code generators are bad because I also found some “better” flutter code generators, I'll cover this in another article later.
This research is from my point of view and I really hope for a better and more significant development of the automation code application, especially for the Flutter code generator because it will later simplify the time and energy resources in application production.

Disclaimer

This article was created based on research conducted by the author so it is not intended to spread hatred. All research sources have been documented on Github, which you can access below:
Another purpose of this article is the author's participation in the #DevElevate event held by Showcase in the #testandautomate and #hotintech categories.
The author does not feel the most correct in this article, some points may be debatable, so if you have views on the topics that the author discusses in this article, please submit them in the comments column so that we can exchange ideas, and if you agree, please leave a like sign in this article. thanks.

develevate

hotintech

testandautomate

7

7

1

develevate

hotintech

testandautomate

HAKIM MADANI
Multi Platform Developer

More Articles

Showwcase is a professional tech network with over 0 users from over 150 countries. We assist tech professionals in showcasing their unique skills through dedicated profiles and connect them with top global companies for career opportunities.

© Copyright 2024. Showcase Creators Inc. All rights reserved.