Getting to know the Widgetscape — Part I 💙
Widgetscape. A new world of widgets!
Have you ever wondered why widgets are the most important part of any Flutter application? Why everything in Flutter is a widget? If yes, but you couldn’t find any appropriate answer to these, then, I will suggest you to have a look at the article, “Let’s enter the Flutterscape” and have a clear understanding of widgets in Flutter.
In this article, we will be deep diving into the different types of widgets in Flutter which are often used in a Flutter application. Are you excited? Let’s get started!
The first two widgets that we will be talking about are used for App/Page setup. These are MaterialApp / CupertinoApp and Scaffold / CupertinoPageScaffold.
MaterialApp / CupertinoApp is typically the root widget in our application. It does a lot of “behind-the-scenes” setup and allows us to configure a global theme for our Flutter application. It also sets up navigation behavior like animations. Whereas Scaffold / CupertinoPageScaffold is generally used as a frame for a page and it provides a background, app bar, navigation tabs, etc., in our application. There is one thing that we should remember while working with these widgets is that we should use only one MaterialApp in our application!
Now, let’s have a look at some of the commonly used Layout widgets. But before that, let’s just first understand what are Layout widgets and how many types of Layout widgets Flutter offers to us.
Layout widgets arrange other widgets. There are many Layout widgets in Flutter, so to ease out the learning process, the Flutter team has beautifully categorized them into 3 types:
In this article, we will not go deep into each of these but just to get you started and have a basic understanding, we will be learning some of the Layout widgets that are commonly used in a Flutter application i.e. Container, Row and Column.
Let’s understand them one by one starting with Container. So, a Container is an extremely versatile widget. It has paint properties, which means it can be sized (width, height, maxWidth, maxHeight), styled (border, color, shape, …) and more. It can take a child (but doesn’t have to) which you can also align in different ways. Interesting, right😉? Try it out yourself to learn more! This is one of the widgets that you will be using quite often.
Moving forward, it’s time to learn about Row and Column. These are a must-use if you need multiple widgets to sit next to each other horizontally or vertically. A Row lays out a list of widgets in the horizontal direction whereas a Column lays out a list of widgets in the vertical direction. These have limited styling options. To apply a style, you will have to wrap these with a Container (or wrap child widgets). Also, their children can be aligned along the main-axis and cross-axis. For a Row, the main-axis is along the horizontal axis and the cross-axis is along the vertical axis. This is vice-versa in the case of Column. To understand this better, have a look at the images below👇🏼
Let’s also have a look at the differences between the Layout widgets we have learnt so far.
Now that you are aware of the widgets; Row and Column, it’s time to know about the Expanded and Flexible widgets which can only be used as children of Row/Column.
An Expanded widget expands a child of a Row, Column, or Flex so that the child fills the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor. To understand flex property better, have a look at the image below:
In the above image, the middle (orange) container takes 3/6 of the available space. Here, the flex factor of this middle container is 3.
A Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis, but, unlike Expanded, Flexible does not require the child to fill the available space.
Alright! That was enough of learning for Part I. Stay tuned for Part II of “Getting to know the Widgetscape” 😎💙.
