Leaf: Flutter Social Media App — Part 6: Models and Inherited Widgets to Pass Data

6 min readNov 24, 2019

Hello, good people! I hope you’re having a wonderful day. Last time, I talked about gestures, navigation and orientation.

Today I’m writing about

Creating, passing and working with data models.
Passing data in the widget tree using Inherited widgets

Lots of stuff to do. Remember that all the code changes can be viewed here. Let’s get started.

Creating models

Before we can pass data around the widget tree. We need to create model.

Cute. But not this type of model.

Model as in Fashion model?

Errm… No. (Though it would be so cool to code up a fashion model.) When I say model I mean the following

A model is a class that has some properties and some functions.

For example, say you have a model of a cat. The class CatModel should contain

Properties of a cat such as no of legs, no of eyes, no of times it’ll wake you up in the middle of the night and so on.
Functions of a cat like eating, sleeping, staring at a blank wall corner for 5 minutes etc.

Why create a model?

Working with models is convenient.

Easily find properties and functions related to a common type of object under one place i.e. in the class. Example: Find how many legs, eyes etc. a cat has from the CatModel class object.
Cleaner code when working with classes. Example: You need to pass data related to a cat to a function. You could create 3 different parameters for that function and then pass in 3 arguments every time. Or you could just make do with one, the CatModel itself. because CatModel will contain all 3 of the properties. You can reference the properties when needed.
Parsing becomes easier. Later posts will talk about json parsing in detail. Models will play a huge role there.

My models

Can’t create fashion models. But I can create class models. Here are the two models I created. I will need them for passing around data in a few moments.

Showing different posts in the news feed

The app home page currently shows the same exact post 5 times. A realistice news feed will have a variety of different posts. So, I need PostCard widgets in ListView to be different from one another. To do make them different, 3 things need to be done.

We need 3 different fake post data. That can easily be created. I’ll just create 3 differing PostModel objects.
Modify PostCard to take data input. This is also easy to do. I just need to create a property in PostCard class for the data and accept value for it using the PostCard constructor.
Modify PostCard to show the inputted data. For this, the data in PostCard widget needs to be propagated to the widgets further down the widget tree. Meaning, the widgets that make up PostCard, need to access the post data somehow.

Step 1: Using models to create fake data

I swear, I’m only taking about using the data models and not the fashion models.

Let me create 3 fake post and user data using my PostModel and UserModel classes. I created the fake data in my DemoValues class. Notice that I have deleted the previous dummy values. We won’t need them anymore. We’ll use these new ones everywhere.

Step 2: Making PostCard be able to take in data

We just need to modify the PostCard widget to make it take external data. And that’s very easy to do. Just add a new property to the PostCard widget class and add it to the constructor. Refer to the code snippet below:

Step 3: Showing the inputted data

All that remains now is to use the post data. The child widgets of the PostCard widget sub-tree need to access this post data and show it to the screen. We already created the widget tree. We just need to get the data to the widgets. But wait. How do we pass it to the child widgets further down the tree? We could do this in two ways. The latter of the two is better.

Do the same thing as the above snippet. Just modify all the classes to have an additional property for the post data. Then pass the data from parent to child.
Or we could take advantage of inherited widgets.

Inherited widgets? The frick is that?

He’s spewing crazy names again. Help!

Don’t be afraid of the term. It’s an easy concept to understand. The flutter team explains this widget extremely well. See this video to understand what it is and how to use it.

Creating an inherited widget

If you watched the video I linked above, you know how simple it is to create this widget. I’m going to create a folder called inherited_widgets in lib/widgets/ for all my inherited widgets. Here, I’m going to create my inherited widget for post model. I’m naming the file inherited_post_model.dart and filling it up with the code below:

Using the inherited widget to pass data

There are two parts to this which are as follows:

I need to pass in the data by first creating a InheritedPostModel widget in the PostCard widget.
I need to retrieve the data using either inheritedWidgetOfExactType() function. Or using InheritedPostModel.of(context)

First, I create the InheritedPostModel widget. Then I pass the data in.

Notice lines 26 to 35 for the changes

Now, I will try to grab the data from the inherited widget. Here, I show how I do it for one of the many child widgets of PostCard.

Notice lines 7, 12 and 13 for usage

I did the same thing everywhere I used static values from DemoValues class. Now, the PostCard widget doesn’t need the DemoValues class at all. Try to do the rest of the widgets. If you’re facing trouble you can always check out the repository for the code.

Updating HomePage widget

The final thing to do is to update the home_page.dart file. Previously, no data was being passed to the PostCard widget from the HomePage widget. Now, we are passing in data. The data being passed is from the DemoValues class. See the code snippet below to see what has changed:

Running the app

Running the app now doesn’t destroy the universe. I’ve made a lot of changes under the hood. But the app still works as expected.

I need to format the date but I can do that later.

What about passing data to PostPage widget?

Can PostPage retrieve data from inherited widget as well? The answer is NO.

Because PostPage is not a child of PostCard. It is a separate page. Meaning, it is not a part of the widget tree of PostCard. So, it can’t just inherit widget from PostCard widget. In this case, I have no choice but to pass the data via parameters. So that’s what I’ll do.

I need to do 2 things

First let me edit PostPage widget so that it can take PostModel data.

Notice line 5, 7 and 13

Second, I need to now pass in post data from PostCard widget when I navigate to PostPage.

Notice line 14 to see how I passed data to PostPage

So, now if we run the app and try to go to the post page, we’ll see that each post produces a different post page. The post page isn’t pretty I know. But it does change based on the post being tapped. So, that’s great! I’ll design the post page in the next post. For now, we’ve achieved a lot!

Summary

So that was a long post. We went through a lot of things today. I hope you get why we’re doing things the way we’re doing them. If you get that much that’s enough. I’m very proud of what we’ve learned today.

Remember to update the test for PostPage widget and commit your code.

Code changes

Visit here to see code changes

Important links

Parts of the series

Support me by

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

That’s all for today. Thanks for reading! Stay safe and happy coding!