Flutter Tutorial — Implementing a Sign-Up page in Flutter
Hello friends, after creating a signup page in the first article. As promised, in this second article we will cover how to integrate the signup page with the API endpoint. The idea of integrating the signup and the endpoint is while we launch the app, the app should show us the signup page and we insert the values, if all values are valid we will send the post request to the API endpoint through the signup button.
The API endpoint that we are going to use is https://dummyjson.com/users/add from dummyjson.com. From the documentation, when we hit the endpoint, it would not create real data for the database, so the scenarios are either we face the internet error connection, or we get the successful message after sending the request. Let’s first see what response we are gonna get if we successfully make a request.
As we see above, the server would send the user data that we created with so many properties.
Let's start moving to the code.
The first is: Create a user model
Create the file named user.dart and type the code like below.
The user model has many properties, but let's concentrate on the fromJson method. At the method, we can see that we are doing the conditional statement using the if null operator. The id, username, and email would be returned after we click the signup button, but the rest properties would be null, so we assign the value above to the rest value that was null.
The second: Create an error handling
The error that we can face while we launch the app is the no internet connection. Let's create the code to handle that error.
We see, in the code above we create a class named Failure with the message property.
The third is: Create a service
In the code above, we create the class for integrating our app with the service to signup. We don't need to create an object from the class every time we need to implement the service, so we make the signUp method static. Within the method, we are implementing the HTTP request using the HTTP library, it also needs 3 parameters, such as username, email, and password that we can obtain from the user input.
We will send the data in the JSON format, so we encode the data to the body request and also we tell the server about the JSON format by providing the value application/json to the key Content-Type in the headers. We wrap the request attempt within the try block and catch SocketException to return the result with the customized Failure object. We create the message as ‘There is no internet connection. Please check your data roaming’ as the Failure message. Back to the try block, within it, we check if the statusCode is equal to 200, so we return the successful result, if not equal to 200 we would return the unsuccessful result.
The fourth is: Create a controller
First, we have to make an enumerated type for a named constant state.
Move to the controller code as below.
In the controller code above, we set the initial value of the state as notRegistered, we also make an initial user object, the message, and two methods. The first method is to set the state for any condition. The second is to use the signup service and provide the data to the UI. Within the signup method, first, we set the state to registering, then we check if the data status is true, we assign the user and message, and also set the state to registered. If else we set the message and also set the state back to notRegistered. The signup service is returning the Future<String, dynamic> value within the result variable to be consumed in the UI.
After typing the code for the service and controller, let's move to editing the code of the UI or the view.
The fourth is: The View
The code for signup_view is quite different from the first article because there are a few adjustments. First, we create the controller object and consume the state property of the controller. Second, we create the _validate method to decide the signup service would be called if the _validate return is true.
If all the data are valid, we can proceed to press the SIGN UP button and update the state property value from the controller to registering value. Because the state value is registering we display the CircularProgressIndicator widget with the Text widget to indicate that request was being sent and waiting for the server to respond.
Within the signUp method, we also check if the request is successful or not by checking the value of the status property that is returned from the controller. If the status is true, we are showing the SnackBar with the message of success and navigate to the LoginView, if the status is false, we are not navigating anywhere.
With this article, we have finished building the signup module within an e-commerce app. Next, I will move to build the login page, see you.
You can find the rest source code here on my GitHub.
