Flutter series — Connecting UI to spring boot backend

Dimuthu Wickramanayake
Jun 7 · 5 min read

Hi Guys, So this is the final tutorial of the Stock market app creation tutorials. In future if possible i will try to modify this by introducing you guys about web sockets and get real time market data to our app. but no worries guys because up until now we have come in a path to create a complete market watch list.

In this tutorial i will be discussing how to connect spring boot rest API to our Flutter UI which we almost finished in the last tutorial. So for now we have most of the things we need covered. Our backend returns the data we need and in the front we have a model to use when we get the data. So all we have to do is just connect these dots.

In the Flutter app we will be using a library called ‘http’ to get the utilities to connect to our spring boot rest API. For this i will update the dependencies in the pubspec.yaml file.

Now let’s create a new class called HttpService to do the data handling part. For this i will create a file called http_service.dart. This class will be used to connect to the spring boot app which is running in the URL http://localhost:8080 and to access the particular end point which is sending us the data, we will access http://localhost:8080/getStock. So if you take a look at the last tutorial in the spring boot series (URL is shown above) this end point returns a set of data in JSON format. Using this HttpService class lets access those data. Code for the file http_service.dart is as follows.

Here in Flutter when we are using a async method, the results are stored to a data type called Future. So to show these data in the UI i will have to use a wrapper called FutureBuilder. If we quickly look at the code above, first we are getting the response using the get function then we decode that data. After that we are looping the list of data coming in the stock parameter and map these values to our Stock object and return a list of stocks in the Future data type.

Now for the UI part right now we are adding stocks data from the home_page.dart file. if you quickly go through the last tutorial you can see when we are initializing the StockList in the home_page.dart we add these stocks dummy data taken from getStocks method. Now we will have to change here to show our real data.

As i mentioned before as we are using Future data type will have to create a FutureBuilder wrapper first and then inside it we will take the data we get from HttpService class and show here. Code for the home_page.dart is as follows.

Here we have first initialize the HttpService class and then in the FutureBuilder we have get the set of stocks returning from HttpService class as the future variable. Until the data is loaded we are showing a CircularProgressIndicator(In built widget) by simply using a if condition to check whether data is there or not. So now when you run the flutter app you will get the real time data for the set of symbols we hard coded in the spring boot app. Final result will look like this.

I think you have learn some practical knowledge about creating a web application using spring boot and Flutter with these tutorials. Please give a clap follow me here and i will continue to post tutorials of these type of cool projects.

Happy Coding guys !!!

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Dimuthu Wickramanayake

Written by

I'm a software engineer at Sysco LABS. Graduated from faculty of enginering University of Peradeniya.

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.