Flutter Online User Login using PHP MySQL API iOS Android Tutorial

In our previous tutorial we have learn about Online User Registration functionality. This tutorial is the second part of User Registration tutorial. In this tutorial we would perform Login functionality in Flutter mobile app. Login is basically used to perform authentication of app using via Email and Password. If app user dose not register himself then he did not access the Profile area. App user should have to login before accessing the Profile page. We are using MySQL database in our tutorial to storing the user registration records and also we are matching the Login details like Email and Password. We are using PHP(Hyper text pre processor) scripting language. So in this tutorial we would create Flutter Online User Login using PHP MySQL API iOS Android Tutorial.

What we are doing in current tutorial:

In this tutorial we’re performing user login functionality using online PHP MySQL server and if the entered email and password matched then the user will redirect to profile activity screen. If the Login details is not matched then it would show us a Error message response coming from server in Alert dialog message.

Read our Online User Registration Tutorial First Before Getting Started.

Contents in this project Flutter Online User Login using PHP MySQL API iOS Android Example Tutorial:

1. Configure http.dart package for Flutter App:

1. We are using http.dart package in our both tutorials. This package is used to transfer data between client and server in JSON form. The http package did not come inbuilt with flutter project. We have to manually configure it into our Flutter project. So open your project’s pubspec.yaml file.

2. Open the pubspec.yaml file in Code editor and find dependencies. Put http: ^0.12.0 in next line.

3. Complete Source code for pubspec.yaml file:

4. After saving the pubspec.yaml file we have to open our Flutter project root folder in command prompt or Terminal and execute flutter pub get command. This command would download and install the added library package in your flutter project.

2. Creating PHP Script to Receive the Sent Email and Password From Flutter App:

1. We have to create a .php extension file named as login_user.php and put all the below code inside the file. Using this file we would first match the entered Email and Password and If entered details is correct then send a Login Matched text to app user so according to that user can navigate to profile screen. If the entered details is incorrect then it will send the app user a error response message.

Source code for login_user.php.

2. We would upload this file to our online hosting server. We have a testing sub domain named as https://flutter-examples.000webhostapp.com/  connecting with Web hosting. We would upload this file to our hosting using File manger. After uploading the file to our server the API url will look like this: https://flutter-examples.000webhostapp.com/login_user.php . We would use this complete URL in our flutter app.

3. Start Coding for App:

1. Import material.dart, Convert and http.dart package in your flutter project’s main.dart file.

2. Create our void main runApp() method and call our First MyApp screen class using home property.

3. Create our main root class named as MyApp extends with State less widget. In this class we would call the LoginUser() class.

4. Create a class named as LoginUser extends with State full widget. In this class we would make the createState() method and pass the LoginUserState class. This method would enable the mutable state management in given class tree.

5. Create our main class named as LoginUserState extends with State. In this class we would make all the Text Field widgets and the Login form is created in this class.

5. Create a Boolean variable named as visible with default false value. We would use this boolean variable to show and hide the Circular Progress Indicator in LoginUserState class.

6. Creating two TextEditingController() object with final data type. We would use these objects to retrieve the entered text in Text Field widget in LoginUserState class.

7. Creating a Future type Async function named as userLogin() in LoginUserState class. We would perform the API web call using this method. We would call this function on button onPress event. In this function first we would perform the Web call and if the response coming from server is same as Login Matched then it would login the user and navigate to Profile activity screen. We would also send the Entered email address to profile activity on Success login.

8. Creating 2 Text Input Text Field widget with 1 Raised button in Widget build area in LoginUserState class.

Complete Source Code for LoginUserState class:

Screenshot:

9. Create another class named as ProfileScreen extends StatelessWidget. This screen will only be show if user successfully logged in.

10. Create a String variable named as email in ProfileScreen class.

11. Creating constructor() in ProfileScreen class and receive the sent email in email string variable.

12. Creating a function named as logout(). We would call this function on Button onPress.

13. Creating 1 Text widget and 1 Raised button widget in Widget build area in ProfileScreen class.

Screenshot:

14. Complete source code for main.dart file:

Screenshots:

Flutter Online User Login using PHP MySQL API iOS Android Tutorial

42 Comments

  1. Thanks for sharing suhch a nice thought, piece of writing is nice, thats
    why i have read it fully

  2. No code this project can download, it’s very difficult to understand

  3. Thank you so much. This is exactly what I’ve been looking for.

  4. I have copied the source code and changed the server login api url, but it doesn’t work. Its just keep loading

    • Antonio you have to make changes in server API also like pass the same param name after login send the response again.

  5. I have created the login_user.php. file and then copied the source code with my server login api. How i can make changes in server API ?

  6. You forgot to do a widget n alert for if password n email not match.

    • Brandon alert is showing on screen if email and password not matched. We are printing response coming from server in Alert. If server sends us email and password not matched then it will show us that in alert.

  7. Tested on Laptop , it is working fine.
    Installed on phone it is going round and round and round

    Not sure what is happening

  8. hi sir, does your login has session?

  9. do you have a tutorials for flutter sessions sir?

  10. Thanks a lot for this, it works fine after some tweaking!
    However I have the following issue:

    Typed password is being compared to the HASHED password stored in the database therefore it gives me a login error. When I manually edit the password in the table by typing something easy then when I test the login function works fine. So there has something to be done in the login_user.php to compare the typed password against the real password that corresponds to the hashed on.

  11. HI Mohit! Great tutorial man! Thanks for sharing and answering all the questions. I have a question for you.. : have you faced any problem maintaining users logged in while using flutter web with your approach? How do you keep users logged in while using flutter web? In our app when they close browser and open again the browser they have to login again but we need them to be able to go directly to their profile page.. Thanks in advance for your help!

    • Abel you want to automatically logged into browser if they did not log out before ?

      • Yes.. that’s what we want to accomplish.. automatically login..

        • Abel you can do this easily by saving fix value in app and each time when you successfully login or log-out change the value. On app start time check the value if the value is found then automatically logged in because on log-out the value will be deleted.

  12. hi i tried this, when i run the app in debug mode it shows this error Exception has occurred.
    FormatException (FormatException: Unexpected character (at character 1)

    ^ at var message = jsonDecode(response.body);

    • Seb the code is working fine i have just tested the code, Did you put your own server details like database name, password, host name and username ?

      • i checked again and had a typo error in the php script, thank you so much for this tutorial it has helped me a lot, i was wondering if i need to insert data into another table which has a foreign key, how do i do it using the logged in users id as the foreign key of the table i need to fill in with data, tyvm

    • Please change your php file as given below– just count whether user exist or not in table of BD.

      0){
      // Successfully Login Message.
      $onLoginSuccess = ‘Login Matched’;
      // echo $check[‘UN’];
      // Converting the message into JSON format.
      $SuccessMSG = json_encode($onLoginSuccess);

      // Echo the message.
      echo $SuccessMSG ;
      }
      else{
      // If Email and Password did not Matched.
      $InvalidMSG = ‘Invalid Username or Password Please Try Again’ ;

      // Converting the message into JSON format.
      $InvalidMSGJSon = json_encode($InvalidMSG);

      // Echo the message.
      echo $InvalidMSGJSon ;
      }

      ?>

  13. hey i’m getting an error, it always return try again, everything is corret, can you help me?

  14. I works in Android and ios but it doesn’t work in flutter web.

  15. I can just login when i don’t type any email and password,
    Is this normal?
    (It works fine when i type email and password. Also i get a alert when password is wrong. But i can just login when the email and password is empty)

  16. This code wasn’t working for me, then I removed the circular indicator and then it worked, i was redirected to my profile screen

  17. Hello, this code has really helped me in my project. Please I would like to know how to keep user logged in, even when the app is re-started. Thanks in advance! (Flutter & PHP MySql)

  18. this was soo helpful sir but i also want (change password) code in php mysql like this…(I’m confuse in change password through php script).

  19. Hello, thank you the tutorial is really helpful! Unfortunately, I have changed all the parameters, but the screen keeps loading and this error comes up: [ERROR:flutter/lib/ui/ui_dart_state.cc(166)] Unhandled Exception: FormatException: Unexpected character (at character 1)

  20. Hi Sir, your backend code should be rewritten because is very unsafe. First of all you didn’t hash the password, and secondly you didn’t sanitize the input.
    Also you didn’t check that the post is coming from the app.
    This code is useful only for teching purposes

    • Thanks for giving me your opinion. This code is for teaching purpose but in the future I’ll make the backend code with your given suggestion 🙂 .

Leave a Reply

Your email address will not be published. Required fields are marked *