Flutter Online User Registration using PHP MySQL Server Tutorial Android iOS Example

User registration is one of the most usable functionality we have ever seen in mobile applications. In today’s word almost every app comes with user registration form, where user can create his account on online MySQL server or MongoDB server. In current tutorial we are using PhpMyAdmin server with MySQL database. We are using PHP scripting language to receive and insert user registration data into MySQL database. So in this tutorial we would create Flutter Online User Registration using PHP MySQL Server Tutorial iOS Android.

Key feature of this tutorial:

  • Online user registration using PHP MySQL.
  • Duplicate email address registration forbidden.
  • User can only create 1 account with 1 email, If same email found than registration will not be completed unless user enters new email address.

Contents in this project Flutter Online User Registration using PHP MySQL Server Tutorial iOS Android Example:

1. Create MySQL database + Table in PhpMyAdmin Server:

1. We are using MySQL database in our tutorial which can be accessed via PhpMyAdmin control panel. We have a demo online web hosting account with PhpMyAdmin. So open your PhpMyAdmin control panel and you can also select already created database or create a new database. In my case i am using my already created database.

2. After selecting the database we have to create a Table named as user_registration inside it with 4 Columns. See the below screenshot for more details.

3. Create 4 Column name inside the Table named as id, name, email and password. We have to declare the id as integer data type with Primary key with Auto increment here. name, email and password should be in Varchar data type. Now hit the Save button.

4. Below is the user_registration table screenshot after creating successfully.

2. Creating PHP Script to Receive the User Registration Data Coming From Flutter App and Insert into MySQL Database:

1. Create a .php extension file named as register_user.php and paste all the below code in it. You have to change the Database hostname, database password, database username and database name in this file with your database details.

Complete Source Code for register_user.php file :

2. We have to upload this .Php file on our online hosting server using File manager our Filezilla ftp client. In our case we have a demo hosting account with connecting with Sub domain name https://flutter-examples.000webhostapp.com/ . After uploading register_user.php file on our server the Complete URL of API is https://flutter-examples.000webhostapp.com/register_user.php . We would use this API URL in our flutter app.

3. Setting up http.dart Package in your Flutter Project:

1. We are using http.dart package in our flutter project to perform the Web call functionality. This package has all the functions and classes used to transfer data between client and server. This package cannot comes with Flutter project, we have to manually configured it in 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.

Complete Source code for pubspec.yaml file:

3. Now open the Flutter project root folder path in Command Prompt and execute flutter pub get command. This command will download all the newly added package from online server.

4. Start Coding for Flutter App:

1. Open your project’s main.dart file and Import material.dartconvert and http.dart package.

2. Call our main MyApp class using void main runApp() method.

3. Create a new class named as MyApp extends with State less widget. This is our main Root View class. In this class we are calling RegisterUser class.

4. Create a class named as RegisterUser extends with StatefulWidget. In this class we would pass RegisterUserState class using createState() method. The createState() method would allow us to use Mutable state management in given class root.

5. Create our main class named as RegisterUserState extends with State. In this class we would design our complete registration form.

6. Create a Boolean variable named as visible with default value False. We would use this variable with State to show and hide the Circular progress indicator.

7. Create 3 TextEditingController() objects to Get the entered data from all 3 Text Fields widget. To get data from Text Field it is necessary to use text editing controller.

8. Creating a ASYNC function named as userRegistration(). We would call this function on button onPress event. In this function first we would get entered value from Text Field Text Input widget in String variables then make a Web call to our online server. We would also print the response message on Screen using Alert dialog box. We have to use Future keyword with function. Future keyword is used to make object representing delayed computation.

9. Creating 3 Text Field widget, 1 Raised button widget and 1 Circular Progress Indicator in Widget build area of RegisterUserState class.

10. Complete source code for main.dart file:

Screenshots:

Flutter Online User Registration using PHP MySQL Server Tutorial iOS Android Example Screenshot of Table after inserting record:

51 Comments

  1. i try this but its not working
    its just keep loading

    • Melcah did you import the http library and one more thing which server you are using like Local server or online server ?

      • im using local server and had to make use of the 10.0.2.2(testing with emulator) but not working help please

        • solved had to downgrade my http lib

          • Thanks for notifying us 🙂 .

          • which version of http lib you used? As nothing happens on clicking ‘Click for registration’ button, instead it gives me following in debug console:

            I/flutter (23797): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════
            I/flutter (23797): The following _CompileTimeError was thrown while handling a gesture:
            I/flutter (23797): Unimplemented handling of missing static target
            I/flutter (23797):
            I/flutter (23797): When the exception was thrown, this was the stack:
            I/flutter (23797): #0 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:706:14)
            I/flutter (23797): #1 _InkResponseState.build. (package:flutter/src/material/ink_well.dart:789:36)
            I/flutter (23797): #2 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24)
            I/flutter (23797): #3 TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:486:11)
            I/flutter (23797): #4 BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:264:5)
            I/flutter (23797): #5 BaseTapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:236:7)
            I/flutter (23797): #6 GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156:27)
            I/flutter (23797): #7 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:222:20)
            I/flutter (23797): #8 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22)
            I/flutter (23797): #9 GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7)
            I/flutter (23797): #10 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7)
            I/flutter (23797): #11 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7)
            I/flutter (23797): #15 _invoke1 (dart:ui/hooks.dart:273:10)
            I/flutter (23797): #16 _dispatchPointerDataPacket (dart:ui/hooks.dart:182:5)
            I/flutter (23797): (elided 3 frames from package dart:async)
            I/flutter (23797):
            I/flutter (23797): Handler: “onTap”
            I/flutter (23797): Recognizer:
            I/flutter (23797): TapGestureRecognizer#8913a
            I/flutter (23797): ════════════════════════════════════════
            D/GraphicBuffer(23797): register, handle(0xe68cee40) (w:1080 h:1920 s:1088 f:0x1 u:0x000b00)

  2. its just keep loading in app but give alot of error statement in android studio and also add data in the database tables too 🙁

  3. Can we have token serialized
    from that

  4. can we make that password not visible

  5. i mean can we make that password encrypted in database while registering user

  6. This is too good, with the shared code, it was ready in minutes otherwise for me it would be 2 to 3 days work.

    Thanks Bro

  7. Thanks for posting such a nice article. In my case the message “Try Again” written in the PHP script worked with following code:

    echo json_encode(‘Try Again’);

    Can you post another article for login, home page and logout also? It will make a complete life cycle of this app. If you have already posted article for login, home page and logout then please send me its URL.

  8. Hi there,

    I’m new to mobile development … do we not need to be concerned with SQL Injection, such as with your using the variables (like $email) directly without any validation?

    $Sql_Query = "insert into user_registration (name, email, password) values ('$name', '$email', '$password')";

    I really appreciate seeing how a Flutter can talk to PHP. Thank you very much for the walk-through!

  9. Can we use even if we installed the app in many devices?

  10. Owonubi Job Sunday

    Thanks for the tutorial, would you be kind enough as to help out with tokens when making a connection to a server?
    Thanks very much.

  11. Hey i am getting try again message whenever i run php file. where is my code wrong can you please help me?

  12. hello thank you very much for the code, how can we make the password encrypted in this code, ???? I would appreciate if I had a response. thanks

  13. please can someone help me with this erro?
    when running the code, the screen of my emulator turns black and this message appears in the terminal:

    I/m.example.myapp( 2933): type=1400 audit(0.0:1309): avc: denied { add_name } for name=”build” scontext=u:r:untrusted_app:s0:c512,c768 tcontext=u:object_r:system_data_file:s0:c512,c768 tclass=dir permissive=1
    I/m.example.myapp( 2933): type=1400 audit(0.0:1310): avc: denied { create } for name=”build” scontext=u:r:untrusted_app:s0:c512,c768 tcontext=u:object_r:system_data_file:s0:c512,c768 tclass=dir permissive=1
    I/1.io ( 2933): type=1400 audit(0.0:1311): avc: denied { remove_name } for name=”CAZAAAACAAAAAAAAAAABGAABAAOAAFAACUAAGAH7777777777777777777777777EAAAGAAAAAAAAAAAAAAAEAAAAAYAAWAA.temp” dev=”sdb3″ ino=81977 scontext=u:r:untrusted_app:s0:c512,c768 tcontext=u:object_r:system_data_file:s0:c512,c768 tclass=dir permissive=1

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

  15. Hello I tried your code but mine keeps loading . I am using an API with authorization

  16. This is what i did here is my code

    var url = ‘http://api.somewebsite.com/a1/connection’;
    Map headers1 = {
    ‘Content-Type’: ‘application/json’,
    ‘Accept’: ‘application/json’,
    ‘Authorization’: ‘xxxxxx445684958zxxxxxx’,
    };

    // Store all data with Param Name.
    var data = {‘firstName’: firstName, ‘lastName’: lastName, ’email’: email, ‘mobile’: mobile, ‘password’ : password, ‘confirmPassword’ : confirmPassword};

    // Starting Web API Call.
    var response = await http.post(url, headers: headers1, body: json.encode(data));

    // Getting Server response into variable.
    var message = jsonDecode(response.body);

    // If Web call Success than Hide the CircularProgressIndicator.
    if(response.statusCode == 200){
    setState(() {
    visible = false;
    });
    }

    // Showing Alert Dialog with Response JSON Message.
    showDialog(
    context: context,
    builder: (BuildContext context) {
    return AlertDialog(
    title: new Text(message),
    actions: [
    FlatButton(
    child: new Text(“OK”),
    onPressed: () {
    Navigator.of(context).pop();
    },
    ),
    ],
    );
    },
    );
    }

  17. is it ok to put it inside the form and use formkey for validation?

  18. I made some changes to the file, I added these fields: name, number, gender, email and password but when I type in the first field which is the name, all the other fields are being typed in automatically. If possible share your email with me, I will send you a screen recording of it. And in my database, only the 1st column is being saved.

  19. nevermind, it started working now

  20. Thank you for this tutorial. Do you have any idea why user name does not show in database after successful registration? It is only id, email and password that shows.

  21. Nice work Bro, you really save my life on this one. Can you please do a tutorial on how to Reset Password in Flutter and Mysql. Thanks in advance.

  22. Nice work..Thanks a lot..

  23. Bhadiyadra Vivek

    Hi there,

    I’m new to mobile development … do we not need to be concerned with SQL Injection, such as with your using the variables (like $email) directly without any validation?

    $Sql_Query = “insert into user_registration (name, email, password) values (‘$name’, ‘$email’, ‘$password’)”;

    I really appreciate seeing how a Flutter can talk to PHP. Thank you very much for the walk-through!

  24. i was run this code but this is keep loading but the database is inserted as a null values but id only inserted other filed as empty….pls anyone help me

Leave a Reply

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