DEV Community

loading...

Flutter Rest API Integration

rrtutors
I am an Android and Flutter Developer. Having 7+ Years of Experience in Mobile application development. Looking for article writers on my website.
Originally published at rrtutors.com ・2 min read

In this Flutter Rest API Integration example we will build user Registration and Authentication with Backend System. Here we are using the Backend Authentication with PHP Registration and Login APIs. In the App side we are maintain the User Authentication status with Shared Preferences. Previous article we have learned REST API Integration in Flutter with Retrofit library and we also updated dependencies with null safety feature. If we have to declare variables before accessing we need to apply late modifier to that variable.

Showing the snackbar with Scaffold is deprecated here we are showing the snackbar with scaffoldMessengerState

This example contains the below backend PHP files

    mysqli_connect.php
    login.php
    registration.php
Enter fullscreen mode Exit fullscreen mode

Front end having the below page

    signin.dart
    signup.dart
    home.dart
    main.dart
Enter fullscreen mode Exit fullscreen mode

We would need to make HTTP calls and persist data locally, so add two additional packages to pubsec.yaml as well

dev_dependencies:
  flutter_test:
    sdk: flutter
  http: ^0.13.3
  flutter_datetime_picker: ^1.5.1
  intl: ^0.17.0
  webview_flutter: ^2.0.9
  shared_preferences: ^2.0.6
Enter fullscreen mode Exit fullscreen mode

Flutter Login Registration Page

Call Rest API with http post request

  login(email,password) async
  {



    Map data = {
      'email': email,
      'password': password
    };
    print(data.toString());
    final  response= await http.post(
        Uri.parse(LOGIN),
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/x-www-form-urlencoded"
        },


        body: data,
        encoding: Encoding.getByName("utf-8")
    )  ;
    setState(() {
      isLoading=false;
    });
    if (response.statusCode == 200) {
      Map<String,dynamic>resposne=jsonDecode(response.body);
      if(!resposne['error'])
      {
        Map<String,dynamic>user=resposne['data'];
        print(" User name ${user['id']}");
        savePref(1,user['name'],user['email'],user['id']);
        Navigator.pushReplacementNamed(context, "/home");
      }else{
        print(" ${resposne['message']}");
      }
      scaffoldMessenger.showSnackBar(SnackBar(content:Text("${resposne['message']}")));

    } else {
      scaffoldMessenger.showSnackBar(SnackBar(content:Text("Please try again!")));
    }


  }
Enter fullscreen mode Exit fullscreen mode

How to make email validation in flutter?

In this REST API integration email validation is made by using Reg expression like below, we can also validate form fields by using Flutter Form Buider

var reg=RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+");

reg.hasMatch(_emailController.text)
Enter fullscreen mode Exit fullscreen mode

In the above we have used http package to make rest api calls. Here Rest API integration with Retrofit to handle response and parse json data to model class

Download source code for
Flutter Rest API Integration with Login and registration

Flutter Rest API Integration with Retofit

Flutter Rest API with Bloc state Management

Discussion (0)