Let’s enter the Flutterscape💙
Flutterscape. A new world to unravel!
If you just heard the name ‘Flutter’ and after googling it you landed on this article, then I will advise you to first understand what is Flutter and why one should learn Flutter through my previous article, “Kickstart your journey in Flutter!”.
So, after reading the previous article you have a basic idea of what is Flutter. Now you wish to learn the core concepts of Flutter and develop beautiful applications that solve real-world problems. Don’t worry! You are at the right place, my friend. In this article, we will be looking into how we can break down a particular User Interface into widgets and how a widget tree is created in Flutter as this is the fundamental concept that one should understand while working with Flutter.
Everything in Flutter is a widget.
Yes! you read it right. Now, what do we actually mean by that? What is a Widget? How can everything that is rendered on the screen is a widget? What does rendering mean? That’s a lot of information to process within a fraction of seconds. Right? Don’t worry! Let’s deep dive into this!
Take, for example, you are creating the following user interface for one of your production-level applications (Flutter can obviously create much more beautiful UI’s than this but just for understanding let’s consider this).
In this UI, whatever you are able to see is a widget. Widgets are basically an immutable description of part of a user interface. They are the smallest UI component that you can use to show on the device screen.
To understand this better, let us build this user interface from scratch and see how powerful widgets are in Flutter development. We are not writing the actual code here but I am sure that after this article you will be able to see every UI in reference to a widget.
Whenever we create a painting, the first thing we take is a Canvas, right? Just like that, Scaffold acts as a Canvas for your Flutter application.
Scaffold implements the basic material design visual layout structure. It will occupy its entire window or device screen. This widget allows us to add some Material components like Drawer, AppBar, BottomNavigationBar, etc.
As we move forward, we will also be creating the widget tree for the UI specified above. You must be wondering what is a widget tree now? Let me explain this to you. A widget tree is nothing but a tree in Flutter that will be created based on how you design your screen and how you are adding widgets to your screen. So, what you see on the right side of the image is a widget tree for the UI which has only Scaffold widget right now.
If you are keen to learn more about the different types of trees in Flutter then feel free to hop over to this article, “Deep dive into Flutter — Trees!”.
Now, let’s add an AppBar to our application and see how it looks.
Mmmm… Interesting, right🤔? So, now what you have done is, you have added an AppBar widget in the Scaffold widget. Have a closer look at the widget tree now. We can see a branch of the AppBar emerging from the Scaffold.
Let’s move ahead and add a Container widget in our Scaffold. Don’t worry, in a minute you will understand why we are doing this.
What is a Container widget now? Container is a widget that you can consider as a box with paint properties. To understand this better, let’s add some more widgets in our Container.
As you must have understood by now that we have added a Column widget in our Container, but, why did we do that🤔? We did that because a Column displays its children in a vertical array.
Now, in the Column, we have added a Row widget and a Text widget. As you can see both these widgets are aligned in a vertical fashion. I know this is a lot to process and our widget tree is growing but trust me once you understand this, it will be much easier to code this using Dart.
So, what is the need for a Row widget here now? As a Column displays its children in a vertical array, a Row displays its children in a horizontal array.
Both Column and Row are Layout widgets. There are many more Layout widgets other than these two but as you start building real-world applications you will encounter them later. For now, let’s just stick to these two.
Let’s complete the user interface by adding a Text widget and an Icon to the Row.
You must be thinking what are Text and Icon widgets? Let me tell you.
The Text widget displays a string of text with a single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
As the name defines, Icon widget is a widget that allows us to use Material Design Icons. You will get to understand interactive and non-interactive icons as you use them.
Tadaaa! We are done with the UI that we wanted to create at the start of this article. I hope this article gave you an insight into how a UI is broken down into widgets and how a widget tree is created in Flutter.
Borrrrrrrrrrrrrrred of reading? No worries! Feel free to check out the GitHub Repository.
