how to pass object in post api to create account in flutter - json

Question

I have created a login form with email, password a login button. I am new to flutter, dart and web.
How do I integrate the JSON Restfull API for Login and Signup, by using JSON as an object.

Answer 1

Assuming you're completely new at Flutter and dart, there are a few steps to complete a RESTful API call.
At first, you'll need to provide a dependency from pub.dev named http.
After adding the dependency in pubspec.yaml file, go to the terminal, and run the command pub get.
Now, in your login form, I'm assuming you're trying to post a username and a password to a certain endpoint.
Let's create a separate file named networking_helper.dart just to keep everything of RESTful API in a well-mannered structure. You can keep your API implementation in your FORM screen, but I will strongly recommend not mixing UI code with backend code.
Now, create a class in the networking_helper.dart file to bind all API methods. Create a method that will contain all your API-related code with the login endpoint. For example:
class NetworkingHelper{
Future<bool> login(String email, String password) async {
//api implementation will be here
}
}
Now, look closely here, here I've created a class named NetworkingHelper to encapsulate my API methods. Inside the NetworkingHelper class there is a method named login. The login method requires some parameters based on its need. The login method is declared as async, to execute the job in the background.
Let's prepare some data that will be provided to complete the API call.
Assuming you will be using a POST method to execute your login FORM's data, let's declare a Map of the String key and dynamic value like this:
final Map<String, String> bodyParams = {
"username": username,
"password": password,
"grant_type": "password",
};
Don't panic yet about why I choose to use "username", "password" and "grant_type" keys. My login endpoints require these values. Communicate with your API developer about their needs and replace your required keys with the above-mentioned keys.
To establish an HTTP connection with your required data and to wait for a response, follow this step:
final Response response = await post(Uri.parse(<url>), body: bodyParams);
Typically asynchronous method returns a value with delay, so we have to wait until it finishes the job. So we used the await key to indicate the waiting period.
After that, it's fairly simple. Just implement few if/else based on your needs to ensure your data is valid and HTTP call was successful. Example:
if (response.statusCode == 200) {
return true;
} else {
return false;
}
Remember the method's return type declared above? What was it?
It was Future<bool?>. Let's break it down too. Let's start with the impression. Our return type is a boolean value that will be provided in the future because our method was declared as async. Make sense!!!
This is why we are returning true or false after we finished our API call waiting phase.
To give the complete structure of the API call, here is the complete code:
class NetworkingHelper{
Future<bool> login(String email, String password) async {
final Map<String, String> bodyParams = {
"username": username,
"password": password,
"grant_type": "password",
};
final Response response = await post(Uri.parse(<url>), body: bodyParams);
if (response.statusCode == 200) {
return true;
} else {
return false;
}
}
}
Hope that will help you a bit. Happy coding :D

Answer 2

This is Very Easy Example.
I was created already in my github account.
Please try it: https://github.com/JayswalViraj/Flutter-Login-With-Rest-API
Note: Login and registration both are working process same. Only you need change api url for registration process. Login api url to registration api url.