Flutter Rest API - Simplifying Make API Call Using Retrofit

when we want to make rest API call we usually use HTTP and do packages these packages are easy to use but if you want a cleaner code I recommend using retrofit package even though it is more complex that it is not and it is very easy so to call recipes by sending Dynamic headers parameters request and response in a custom and secured way retrofit is the best way to get started first we need to add these packages to the project buildrunner is used for code generation and dartapart from the pup also Json serialization creates a model class from Json data now first we create a folder named service then inside this folder we create a file named API service here we first Define an abstract class called API service this class is responsible for handling all the network call methods because retrofit generates code we must specify the dot g file with part at the top of the file in our case it will be API service.g.dart also we need use rest API annotation and pass the API base URL to it so the generator will know it's a retrofit interface then also we need create a factory Constructor that accepts deal we are going to make a request to this API as you can see the response that the server sends us is in Json format so we need to parse this Json first we create a folder then inside the folder we create a file called post model now here we create a class called post model then we Define the parameters of the model which are the same as the Json parameters then we create the Constructor of the class also we need to create functions called from Json and to Json which translate a Json to our user as you can see from the to Json and from Json functions we are going to use serializable Json so we need to use Json serializable annotation also we must specify the dot g file with part at the top of the file in this case it will be postmodel.g.dart now we return to the API service file here the last thing we need to do is to define the method that we are going to make a request to the API therefore in the abstract class we Define a future method called get posts which returns a list of post models we do not implement this method and it is supposed to be implemented by the retrofit generator only now it is enough to determine what method this is that's why we have to use HTTP annotation therefore we must use retrofit annotations as you know the type of request we send to the apis get retrofit uses the base URL that we defined above and now we need to put the path in get which can be posts according to the API URL and finally to fix these errors and generate the dot g files it is enough to enter this command in the terminal as you can see the errors were fixed and Dot G files were generated the implementation of the application logic is done and now we have to implement the UI so I create a folder called pages and then create a file inside it called home here we first Define a stateless class then in the build method we return a scaffold and also set the app bar in the body we can use the future Builder widget to get posts and display them so I make a widget called body which is a future Builder type now here we first Define the API service class instance as you know now we have to return a future builder in the future parameter we put the method name get Post in the API service class then we check in the Builder if the data is received from the server show the posts otherwise show a loading circular progress indicator now to display the posts we create a widget called posts which has a list of post models in the input and returns a list view Builder here an item count property set the post length to display the posts in list View and finally in the Builder method we create a simple box using a container that displays the title and body of the post and finally we return the posts widget and also set the body widget in the scaffold now if we restart the app we will see that the posts are displayed correctly and make the sure hit the Subscribe button to get next video foreign

Channel: Flutter Guys

Views: 14,789

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, flutter tutorial 2023, flutter course, flutter course full tutorial for beginners, flutter course for beginners, flutter api tutorial, flutter api integration, flutter api call, learn flutter, fetch data flutter, fetch data from api flutter, flutter api, flutter retrofit, flutter retrofit tutorial, flutter retrofit dio, flutter dio tutorial, flutter dio api, dio flutter, flutter dio api call, rest api flutter

Id: zjNhlmue5Os

Length: 3min 41sec (221 seconds)

Published: Wed Apr 12 2023