I just learned Flutter…. here is how I feel about it.

About this article

As of writing this article, I have approximately 1 month of experience coding with flutter. I created “You are a poem”, a website that transforms its user into a poem (Which, by the way, you are welcome to try out at: https://attalakheireddine.github.io/You-are-a-poem).

This article will cover some general flutter concepts, my recommended way to go about learning it, and my overall opinion on the framework itself. It is directed to fellow new flutter devs as well as people who are on the fence about learning the framework.

You are welcome to discuss the content of the article and share your own thoughts. That being said, I wish you a pleasant reading experience.

Context

After being done with the API backend of “You are a poem” and making certain it worked properly with a minimal HTML/CSS/JS Frontend, the website needed a de-facto frontend to present its content to its users.

At that point, I had had minor experience with both flutter and its alternatives (Kotlin and React Native). Though, as fate would have it, I had been infected by the rumor that “Flutter was very easy” (whatever that meant), AND could compile to web, android, iOS, windows, and my mom’s refrigerator. So, motivated by greed and sloth, I embarked in the journey of learning flutter with the specific objective of making “You are a poem”, both as a website and an Android app.

The gist: A Flutter tldr for fellow lazy people.

One of the nice things about Flutter (We will get to those later, BELIEVE IT) is that one will have a decent idea of what is going on once one understands a few concepts. Here will be explained those “key concepts” that make flutter what it is. Thankfully, those concepts are already covered in depth by legions upon legions of developers more experienced than myself. Thus, we will keep things simple and smart, leaving the details to places they are more welcome:

All is a widget for you to fidget: Anything that exists within a Flutter app is a widget. That includes the “individual elements” such as texts, buttons and images, as well as any structural element that contains other widgets, all the way up to the entire app, which is, you guessed it, also a widget.

This leads to a flutter layout being a widget that contains widgets which in turn contain more widgets, and so on. The result is a tree structure that reassembles HTML’s DOM.

To have a state, or not to have a state, that is the question: Widgets in Flutter are distinguished into two types:

1. Stateless widgets: Those are the ones that never change. Once they are rendered, they stay the same as long as they exist in the layout. An example of a stateless widget would be a social network app’s logo.
2. Stateful widgets: Those are the ones that may change while they exist in the layout. An example of such a widget would be a counter of how many unread messages a user has in a social network app. These “changes” can affect the stateful widget’s children widgets behavior or even their very existence.

The way stateful widgets handle changes is by keeping track of a state (Coding can be full of plot twists, I know). A state is a set of variables that determines how the widget is supposed to behave. For instance, the number of unread messages in the social network app example will likely be part of the state for the counter widget. Whenever the state changes, the widget is re-rendered to reflect the change.

Sidenote to React developers: If you are thinking “Oh, these are just like React components”, you are objectively wrong because the name “widget” makes them very different and way cooler.

You are constrained to know constraints: If this article has one reason to exist, that would be to tell you that constraints are very important. There you have it. Have a nice day.

Constraints are the way flutter deals with figuring the size and position of each widget while rendering the layout. The rule flutter uses is “Constraints go down, Sizes go up, Parent sets position”. Allow me to make this flutter nugget of wisdom clearer to you.

A constraint is a set of four numbers, max-width, which tells a widget how wide it can be at a maximum, min-width, which tells it how wide it can be at a minimum, and max-height and min-height, which serve a similar function for a widget’s height.

In flutter, a widget’s parent will provide the child widget with its constraints. The child will then calculate its own size off of those constraints. Finally, the parent will position its child once that child’s size has become determined. This is what the previously mentioned rule means. Each widget is controlled by its parent through constraints, and the root widget is given a constraint based on the overall screen/window size of the app.

A lot of flutter learning resources do not list constraints as a core concept. A newbie flutter coder may well go through a few videos/articles on the framework without even knowing their existence. This is quite the inconvenience as a lot of rookie flutter mistakes, as well as their fixes, have to do with constraints.

The way I learned Flutter (and the way you probably should)

If I dared give a fellow human being a series of steps to learn flutter, I would bet on the following, based on my own experience:

Make sure you know the core concepts of programming and OOP beforehand: That is, unless you want to be completely paralyzed at the first issue you do not find an answer for on StackOverflow or believe ChatGPT can answer everything. To the developer who has learned such basics, flutter code becomes code like any other. Then he or she will be able to tinker with it all day and get all desired outcomes.

“Flutter is easy” can be a misleading statement: “Easy” and “Hard” are both very boring words. Not only do they put a qualifier on a programming framework that was not asking for one, but they may also set an a priori expectation on how one should view an inherently subjective learning process. Some supposedly easy parts of flutter can be hard or not make sense to certain people, while so-called harder concepts can come more naturally to some other people, depending on their experiences and way of thinking. Also, “Flutter is easy” may lead one to tackle learning the framework with less respect than one should, thus paying the consequences of such overconfidence.

Get a decent feel for Dart: If you have coded in any modern OOP language before, you will mostly be fine. The point being made here does not involve spending several days on the sole purpose of learning dart. However, skimming over the different operators and other syntax quirks that required Google to call this language “Dart” instead of “Python” or “Java” is certainly worth some of your time.

Get started: Where you get started is not of prime importance. There are countless resources online that dangle the tantalizing promise of “Making your first flutter app from scratch” in front of you. Take whichever bait you find most appetizing.

You will quickly learn a few of the flutter built-in widgets and their attributes. At that point, you can fire Android Studio and start using that knowledge.

Learn the core widgets: Some of the widgets you will need to know early are the “obvious” ones, the ones which will likely be featured on most apps, such as Text, Image, and Icon. You will also need to learn about an equally important class of widgets: layout widgets.

Unlike texts and images, layout widgets are not meant to explicitly show on the screen. Instead, they specify how other widgets will be arranged on the screen. Examples of such widgets include Row, Column, Padding, Container, …etc. The number of those widgets is not overwhelming by any means and learning them will be of paramount necessity. You can find a list of the main layout widgets as well as other widgets on https://docs.flutter.dev/development/ui/widgets. And, speaking of that…

Know that flutter.dev exists: That’s it. That’s the piece of advice. flutter.dev exists and it is awesome. You are instantly a better flutter developer for knowing that.

Build your understanding of constraints while coding: After reading the explanation on constraints at https://docs.flutter.dev/development/ui/layout/constraints (Please do not skip that), you need to gradually get a feel for how the different widgets interact using constraints. One of the best places to find training examples is your own code. Whenever you make a layout, try to understand how each widget is affecting the layout, and how the widgets involved make your app look a certain way without overflowing the screen. If, on the other hand, you get an error or an incorrect layout, try to figure what are the constraints each widget receives versus what they should be, and which widget(s) is causing the erroneous outcome. You will gradually become better both at solving errors and avoiding them.

Gradually learn to do the other things: Learning tasks such as fetching data from an API, using a custom font, …etc. will most likely happen when there is a need for them. The solution to each problem you will face will mostly be a combination of finding an online resource that explains what you are looking for or using the existing widgets (especially the layout widgets) creatively.

That’s it: By the time I had gone into the previous steps myself, “You are a poem” was yet to be finished, yet, I had learned flutter. I knew, at that point, how I was to make most of the parts that were not yet implemented. And I found the rest online. Hopefully something similar will happen to you with your own apps.

My thoughts on Flutter

I am not going to drag the verdict out for suspense: I think flutter is a great framework. From the cross-platform capabilities to the logic itself, flutter is a framework shaped like a friend if I ever have seen one.

First, flutter has the entire app coded in one language, as opposed to HTML/CSS/JS alternatives or Kotlin; which uses XML layouts. The reason this is important is that flutter apps are one conceptual structure. Having a separate language for markup will introduce a layer of complexity where the programming language needs to interact with the markup structure and alter it. A flutter app is “just a bunch of dart code” which makes it much easier to process and think about.

Second, the constraint system makes a lot more sense than HTML-type equivalents. With constraints, the root widget is inherently bound to the screen dimensions. The process of making a flutter layout seems to inevitably have one think of the entire screen first and go down to the more granular widgets. If the screen is not enough, one can add scrolling widgets wherever one may need them. If one wants some fancy layout, one needs to find a way to obtain it from the tools one is given.

Compare this to HTML/CSS, where the layout is not bound to the screen dimensions by default, and there are many kinds of positioning options (Absolute, Relative, Float, …. etc.) that are very easy to mess up. This makes flutter way less confusing to code in and debug.

And last but not least, flutter.dev exists. If that is not enough to convince you, I do not know what can possibly be.

Conclusion

Flutter seems to be a great cross platform app development framework that deserves the attention it is getting. I hope to master this technology even further in the future and thrive within the community of flutter devs.