Become Full Stack Mobile developer (Vapor + Flutter) — Part 3
In the previous parts, we have created API using vapor and also created a web page. If you still not reached to the previous part, you can get it from below 🧐
Flutter App
First of all, create new flutter app with name covid_19_india, if you don’t know how to create an app in flutter please visit below link
https://flutter.dev/docs/get-started/test-drive?tab=terminal
Now Let’s go to the code, First, we are going to add required dependencies which we need to run our app.
In the previous section, we have created one route with “api/covid19”, which is our path to access the API, so we are gonna use it here. But first, let’s take a look at our initial flutter code which is the initial screen of the flutter app.
MyHomePage is our first screen, so we will add all the code inside it, Ok so now we will create a model to parse the data and then call API and get the data from our server as like below
Next, we will add _getCovidPatientsData() API function in _MyHomePageState class.
And it’s time to design the UI of the Covid-19 state-wise list, as we have done in a Web page, So first we create a small part of the UI which is repeating in the list.
Now we create all the small parts of our design, so it’s time to assemble into one layout inside the build(BuildContext context) method. Also, we will create collapse and expand feature for each state, so it will display different types of case details.
Now we can see the output by running the code in a device or simulator.
Hurray, Finally we are done with the Flutter app also 🎉
If you like this article do more and more claps 👏. And If you have any query, please leave a comment.
