API Integration in Flutter using Retrofit | Flutter Package Tutorial

in this video I'm going to show you how to make Network HTTP requests in flutter using retrofit if you are experienced with Android development you should familiar with retrofit retrofit is a popular library in the Android development ecosystem created by square which simplifies the process of making Network requests it's typically used with Java or codlin to Define rest API endpoints and perform http operations today flutter libraries integrated with retrofit tool before we start don't forget to hit the Subscribe button so in order to use retrofit you have to add these packages into your flutter project there are a total of six packages retrofit Json annotations and Dio package at under dependencies while retrofit generator bu Runners and Json serializable add under death dependencies once you done adding these packages without conflict we can now start coding so here I have a sample API created by TP code server this API returns three key value pairs which are user id id and title this is just a sample API response firstly we have to create a model class to map the key value pairs into class variable so here I will be creating a class called album and in the album class it should consist of three variables that matches the API response important note here make sure the name of the variable same as the key name in the API response this is very important as any mismatch on the character will fail to map the response and causes the response to return null then I will be creating a Constructor for the album class and this Constructor will take all the variables as par parameter after creating Constructor we have to create the mapping method here we have to use Factory as we need to map and create a new map object this method will takes a roll Json and return a new album object with map Json value as of now we have completed our model class next we have to integrate retrofit into the code firstly I will create a file called API service do do this file handles all the network HTTP configuration then I will be creating a class called apis that store the HTTP end points next we have to configure base URL using allias rest API under this base URL configuration is where we set up our API client before we continue don't forget to import retrofit and Dio packages here we will be using Factory keyword as well which will return a new API client object every time it's instantiated once this is done we can now set up our Network request in the API that I've prepared it is a get request so we will create with Alliance get method and pass in the end points which is apis do album that we have created above below the get method we have to specify the return type and request method name in this API it will return an album object and I will set it as get album method lastly we have to add part followed by file name but added dog before dot dot this is for build Runner to generate file for us so the benefits of build Runner is that it will generate the factory code for us instead of us coding it manually this will save lots of time and reduce typo error in order for build Runner to generate file we have to execute a command in the terminal the command is FL flut P run build Runner build so how does flutter build Runner knows which file to generate that's why we added the part keyword withg file extension so build Runner knows this file needs to be generated once is succeeded you can see that that a new file is created in your current directory and inside this code file is stated that its generated code do not modify by hand this file consists of all the boiler plates code for the factory to work as of now we have completed our API client next we have to create a function to call the API request so now I will create a fetch album function that return a Future album this is because HTTP Network request in flutter is an asynchronized function make sure you add a sync to the function in order to call HTTP request firstly we have to create an instance of the API client this API client takes a Dio function and you can configure the Dio base option the API that I have prepared is Json so in the base option I will set the content type to application SL Json now we can use this API client object to make HTTP request since we have initialized our HTTP method in the API service file in our main code we just have to call client. getet album method to execute the API that I have set up in this API call I have added a try and catch if there is any error this method should throw an error exception as of now we have completed our API function so in the elevated button on press function here is where we execute the API function because this function returns a future object we have to use do then method to retrieve the return object with the return object we can now easily access to the object variables just like value. ID value. title and value. user ID for tutorial purpose es I will just add a print function to each values now let's try it out in the simulator so as you can see it printed out the API response value in the terminal and we can validate by checking back to the API key value Json with this return object value you can use either set State method or any reactive State manager to rebuild the UI and display the API response in the screen another great benefits of using retrofeed is that it simplify the process of making HTTP requests for example if you would now add a new API you can easily do it by adding a new endpoint string and add a new API method without touching your your main code conclusion this is how you make HTTP requests in flutter using retrofit if you have any question feel free to comment below don't forget to like the video and subscribe to our Channel see you in the next video

Channel: AI with Flutter

Views: 2,888

Keywords: api integration in flutter, flutter http, flutter network request, api calling in flutter

Id: upX9T_ciWz4

Length: 9min 18sec (558 seconds)

Published: Tue Nov 07 2023