Leaf: Flutter Social Media App — Part 2: Widgets Introduction

Hello good people! Hope you’re having a wonderful day! Last time I wrote about creating a flutter project, setting up version control and CI.

Today I’m writing about

1. Widgets basics
2. Widget tree
3. Stateless and stateful widgets
4. Creating new widgets

Umm… Widgets?

What are widgets?

In Flutter everything is a widget. Basically, the entire app is a widget that’s made up of more widgets. Here’s what the official documentation says:

Widgets describe what their view should look like given their current configuration and state.

The App is actually a widget trees

Each cat is like a widget :3

It’s easier to think of the app as a tree of widgets. The app is the root widget. All the widgets that make up the app is the child of the root. Here’s a photo, I got from google image search, to show you what a widget tree looks like. In fact, this is the widget tree of the default flutter app we got upon project creation.

Stateless and Stateful Widgets

What in God’s name is a State?

State is just data that changes over the life-cycle of the app. Based on this there are two types of widgets in Flutter. A Stateless widget and a stateful widget.

Stateless Widgets

Widgets that work with immutable (not changing) states.

Stateful Widgets

Stateful widgets work with mutable (changing) states. When a state changes the stateful widget is re-drawn. When this happens, all the widgets that make this widget will also be re-drawn. Meaning, in the widget tree any widget that’s placed below this widget will be re-drawn. But the widgets above it won’t be re-drawn.

A stateful widget can be contained in a stateless widget and vise versa.

Lemme give an example to clear things up

Say we have an app where we show the time as a digital clock. In this case, when our app is running the data that’s constantly changing is “Time”. We need to update the UI to reflect this change in the app UI. Say when we opened the app the time was 9:52:45 AM. And after a second has passed the app UI should show 9:52:46 AM to reflect the change. To to implement this, we use a Stateful Widget. The stateful widget will see if the data (time in this case) has changed and then redraw the widget.

Optional Reading: Performance Consideration and Best Practices

Re-drawing is expensive. So we should re-draw less amount of widgets and do it as less frequently as possible. We never re-draw everything, only ones which need to be updated. In the previous example, time for instance is changing and we’re assuming the rest of the widgets need not change. Flutter doc states that it is best practice to push stateful widgets down to the leaf of the widget tree. Meaning, in the widget tree, we want to place stateful widgets towards the bottom of the widget tree. So that less amount of widgets need to be re-drawn when they change. For example, in the widget tree picture I gave above, if we needed to change the Text then we will make Text a stateful widget so that only it changes, instead of making say Container or Center a stateful widget.

If all this seems tough and vague don’t worry. You won’t need it right now. We’ll revisit this topic in State Management again.

Coding our first widget

OK. Now we shall code. Delete everything in main.dart and widget_test.dart. We won’t need anything in these files. In fact delete widget_test.dart file completely. Now, let’s start coding. We’ll start coding in main.dart.

Let me explain the code line by line.

Line 1 imports another dart file to use it’s contents in this file. The file in particular, material.dart, is a very important file. It contains the logic of a lot of prebuilt widgets available with flutter. So remember this file. You’ll need almost always.

Line 3 is the starting point of our app. The main function is the point where everything starts. And this main function starts our app by calling runApp() function by passing it a widget Leaf. Leaf is a custom made or user defined widget. We define what it is in lines 5 to 19.

Useful tip: Leaf widget is the root widget of this app. It’s good practice to name the root widget as the name of the app itself. Because my app is called Leaf I named the widget so.

Line 5 creates our root widget which is called Leaf. Leaf will be stateless widget.

Line 6 defines the Constructor for Leaf widget class. It takes an optional key parameter.

Line 9 overrides a function called build. Flutter is basically an engine that paints widgets to the screen. This function is pretty important. It returns a widget that should be painted. In this case we returned a MaterialApp widget.

Line 10 to 18 defines MaterialApp widget. Quoting from the official doc for MaterialApp widget

An application that uses material design. A convenience widget that wraps a number of widgets that are commonly required for material design applications.

Line 11 to 14 defines the theme for our app. Themes are specified using ThemeData object. There are a lot of options to specify in it. Play around with the parameters. Take a look here to know more about it.

Line 16 defines our home page. This is the widget that’ll be shown upon starting of the app. In our case we will show HomePage widget. This is also a user defined widget that we’ll create now.

HomePage widget

Start by creating a folder in lib named view. Then create a folder in view called pages. In pages create home_page.dart file. Then write the following code.

Let me go through the code line by line again.

Line 1 is importing the same file as main.dart. like I said this file is very important and you’re gonna need it pretty frequently.

Line 3 defines our HomePage widget. And it is a stateless widget.

Line 8 creates and returns a Scaffold widget. Quoting the official flutter docs a scaffold is

Implements the basic material design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

In a sense, a Scaffold is basically a page. You use it to create anything related to a page such as app bars, navigation drawers, side drawers, bottom drawers etc. Here we implement the app bar and body. There are more options we will implement in future posts.

Running the app

Now let’s run our project. The app should look like the one shown below if everything goes right.

Summary

That’s it for this post. That’s a great start. We just wrote our very first lines of code!

It wasn’t a whole lot of coding but we did learn (hopefully) the following things:

1. Concept of widgets and widget tree
2. Stateless and stateful widgets

Important links

1. Introduction to widgets
2. Stateless and Stateful Widgets
3. Project GitHub repository
4. My GitHub profile

Parts of the series

1. Leaf: Flutter Social Media App — Part 0
2. Leaf: Flutter Social Media App — Part 1: Getting started
3. Leaf: Flutter Social Media App — Part 2: Widgets
4. Leaf: Flutter Social Media App — Part 3: Widget Tests
5. Leaf: Flutter Social Media App — Part 4: Creating news feed using ListView
6. Leaf: Flutter Social Media App — Part 5: Orientation, Gestures and Navigation
7. Leaf: Flutter Social Media App — Part 6: Models and Inherited Widgets to Pass Data
8. Leaf: Flutter Social Media App — Part 7: Widget refactoring and testing revisited
9. Leaf: Flutter Social Meida App — Part 8: Post Page and Comments

Support me by

1. Applauding and sharing this article.
2. Following me in GitHub and Medium.
3. Starring the GitHub project.
4. Starting a discussion regarding this project.

Thanks for reading! Hope you have a great day. Happy coding!