Day 9 — Retrieve Data with HTTP Query and jSon process data

,

Hello 💙
Today, we continue where we left off with you. There is data that can be processed on more than one internet. There is no point in creating them from scratch, we can use our resources as given in our applications. There are multiple ways to do them. Sometimes it is not the number of available people that matter. to determine the usage areas of our data.

We will have three (3) basic stages for these.

- Teaching the data bus into the application,
- Creating modeling so that the data can be viewed in the application,
- Displaying the data to the interface within the application,

Even though it sees a lot of logic when it is written and explained, you need to be aware of some processes so let’s do this period comfortably, then let’s start.

Let’s briefly look at the folder structure of our application,

It is valued in the Lib folder in our main file structure.

Now let’s create the contents of our other files with you.

First, let’s create a structure that we call the opening or welcome screen.

This structure will be created to direct the Home page or the desired screen,
For this, let’s create it with a package tirelessly.

This Package

We define our package in pubspec.yaml in our Root (the directory where the project files and folders are).

Then we just call the Terminal pub get. Then we can use the widgets of this

package in our application. Then let’s use it !!!

If you have noticed, there is 1 router in this structure. After we finish this router loading screen forward process, Target will be directed to the specified page. We do this in our class, which we define as HomePage ().

and Let’s View…

And now let’s start the interface design process on HomePage () slowly …

First, let’s create the preliminary draft of our HomePage, while creating them, we use the widgets we learned the day before.

The design for a widget structure that we want to replace today will also help.

We also make use of the Placeholder () widget. My advice to you is to wrap it with a container to get fast imaging.

and let’s have a look at our code …

Let’s take a look at our Widget Tree. And in this way, we can see the structures that do not wrap together more clearly.

and let’s look at a result visually …

The Start button will have a mission in itself.
When the Start button is pressed, the user data will be reflected to us in

HomePage with the trigger it creates.

So how will this data come from?

First, let’s create the data source of our service. For this, let’s define our application with our user data service defined on

https://jsonplaceholder.typicode.com/users, which is the source of sample projects and draft data.

! In addition, we will take advantage of one more package. You can do this in pubspec.yaml in the Root directory.

dependencies :

We add it to the line with other packages.

Yes, in order for our data to be communicated, let’s first teach it where its source is and the format of the captured data.

and then let’s model the data to be captured.

Let’s embed our structure in UserModel.dart in the file directory we specified.

then let’s create a trigger to run our build.

Let’s use this structure in the FAB in Scaffold.

and then let’s view it by running our Application.

If you have noticed

It has defined a UserNumber. This is the user code of the data that will come to us. As long as this change takes place, our data will also change.
and view the result of the captured data.

Summary

In these structures where more than one variables are displayed, the data from external source providers will always make our application look more dynamic and save us from writing unnecessary code.