How to Crud Operation in Flutter App with Laravel API

INTRODUCTION:

JSON is typically used to transmit data from a client to a server and from a server to a client. We’ll build a Flutter application in this post that can do the following things.

Display data from the server, add data, edit server data, and display data from the client. Delete the server’s data.
I believe that all of us who have used client-server data communication are familiar with these four functions, which are sometimes referred to as CRUD.

Here, the app rather than the server side is the main focus. I’ve got a phony json server ready for the server side so we can practise and learn. This is the fraudulent json link.

The endpoint list is as follows.

GET

POST

PUT

Project Creation:
Now please create a new project by name
flutter_crud_api_sample_app.

Then, we add the http dependency to the pubspec.yaml file

dependencies:
flutter:
sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2

http: ^0.12.0+2

Create Class Model:
Now we need to create a model class from our endpoint response.

We add four fields to the model class: id, name, email, and age. Then we build a constructor with inputs based on the four fields mentioned previously. Then, in the code that follows, we create a Named Constructor.

When calling the Named Constructor, we are utilising the term factory, which prevents the creation of new objects. For the transition from Map to Class Model, we use Named Constructor.
Then, in the code that follows, we add a conversion function from Class Model to Map.

Then, in the code that follows, we add a function to translate the API answer to our model class.
Additionally, the following code contains a function that converts model class data to JSON Format in the form of a String.

And a function to convert from model class to JSON Format in the form of a String in the following code.

Develop an API Service:

To make a request to the endpoint, we must now create an API Service class.

In the code above, we create a getProfiles function which functions to make GET requests to the endpoint

Test Class Model and API Service:
Now before we move on to creating the UI, it would be better if we first test whether the model class and API Service that we created are correct or not.

Create the above code inside the default widget that was created when we created the project for the first time. Now try running the program and see in the logs if we get the data from the API.

Display data from the server
Create a Home Screen:

To make the code easier to read, we isolate the TextField widget (in the form of a method) in the aforementioned code.
Throughout form_add_screen.dart To publish data to the API, we add code inside the onPressed callback. So, using the logic below, we publish data to the API.
The validity of each field is first verified.
The values of each field are then taken.
Next, we include a profile for each data field.dart item
Next, we use the profileToJson () function to convert the profile.dart object into a json form.
Here is the code that completes the task.