When a new coder want to try writing a project with ui, he would be confuse about various ui framework on the market nowadays. If you use them, you will found out:
They are based on the same template.
In deeded, there are no different between most famous ui frameworks.
How Qt work:
How web work:
And .ui/html just basically a certain type xml file.
This application ui build mode stay a long time and work fine. But become out of date in modern era. What if I want to change the ui layout? This request is not important in the past, but not today. Users want an Interactive app today. UI need to change in modern ui design. How can I implement ui change in qt or web?
I need to run framework api in code side and change the ui layout file or ui decorated file. Find element by Id, add XML node or delete XML node in .ui or html or apply new qss / css to node. I need to jump between three type files to make ui change.
But what if I want an animation? Problems are bubbling up. Web and Qt framework only offer limited animations. I can not animate everything I want. Or I need to do some dirty work to animate the element. Another big problem is that I always need to change the elements’ names. But not like change java/kotlin variables name inside Android Studio, IDE can’t trace the elements reference because I refer elements by String. Every time I need to change the names, it’s a nightmare. Codes can’t find its motherboard.
People also try to solve this problem. And React, Angular and others come out. They wrap the traditional ui framework. React use setState to change return value and make ui change. Angular will trace my variables change and invoke rendering ui. They can offer some new design ui elements that automatically animating make my app more Interactive. Also I can inject certain animation package in my project to make custom animations. And framework trace the component reference help me rename the elements. Awesome.
But when project build and become bigger and bigger. In Angular, I can’t always use inline html and css in any components. Every time want to edit one component, I need to open three windows. When I need to edit two components at the same time. Six windows. Nine windows for three. 13` laptop can’t display windows-select bar such long and too many windows make me confuse all the time. React is simpler, but still need open js and css at the same time. Jump out from js to css and jump back, or splite two windows into left side and right side. But both methods are not perfect. I still need quiet some time to handle this problem.
Now, Flutter jump out and save my time. Why we need ui layout/decoration files? Why just use programming language to layout/declare my ui? Why not just change the variables inside the programming language to make ui change? Flutter brake the situation.
What if I want to change ui element in Flutter? I just need to invoke framework to render my widget in next frame and make sure my widget build method return different widget. Everything just inside the programming language. I don’t need to jump between three type files to make my ui change.
Layout and decoration properties are no longer in other type files. They are just normal variables inside the programming language. I can change it in the programming style. Now, I don’t need to jump between three type files. And also IDE can trace the element reference better, I can easily change any element name easier(F2 F2 F2). Animations? No problem, change the variables of layout or decoration frame by frame(AnimationController will recevice vsync signal and notify me when to change the variables), and invoke render api setState. I can easily make custom animation in Flutter.
My life no longer belong to old-style ui pattern because Flutter.
