Flutter Insert Text Input TextField data to MySQL Server iOS Android Example Tutorial

In flutter we would use TextField widget to get any type of typed input from application user. But without storing or processing this data, There is no use of the information. Basically we would store our data on online server where we have to host our own database. In this case we are using MySQL database which is one of the oldest and popular database among developers. We are using PHP(Hyper text processor) scripting language on our hosting server to insert text input textfield data to MySQL server. So what we basically doing in this project is we would get some values from app user from TextField widget and send the data to server using http.dart library. On server we are using PHP to receive the sent data into JSON format and insert all the data into MySQL database. Then simply print a success message on screen using Echo as response and show the response message in mobile application. So the app user will sure that all the data is successfully inserted. So in this tutorial we would Create Flutter Insert Text Input TextField data to MySQL Server iOS Android Example Tutorial.

Contents in this project Flutter Insert Text Input TextField data to MySQL Server iOS Android Example Tutorial:

1. Create MySQL Database & Table in PhpMyAdmin:

1. Before getting started to coding we have to manually create a new MySQL database or select an existing one to create table, So create a new db or select one like i did.

2. Now create a new table in MySQL database named as user_info with 4 Columns.

3. Create 4 columns inside the table named as id, name, email, phone_number. Id should be in integer data type, name, email and phone_number is in Varchar data type with 255 Length. We have to make the id field as Primary key with Auto increment like i did in below screenshot. Hit the Save button after done making changes.

4. Below is the screenshot of our user_info table after successfully creating.

2. Creating PHP Script to Receive Sent JSON data from App and Insert into MySQL db:

1. Create a .php extension file named as submit_data.php . You have to copy and paste all the below code in this file.

2. We have to upload this file to our online hosting server. In this case i have a testing demo website named as https://flutter-examples.000webhostapp.com/ . We would upload the submit_data.php file to our server using file manager FTP. After uploading the file to server our complete path would be https://flutter-examples.000webhostapp.com/submit_data.php . We would use this URL in our flutter application.

3. Setting up http.dart Package for Flutter Project:

1. As we all know http.dart file is used to create connection between flutter app and online server. The http.dart package contains all the useful functions to transfer data between Clint and Server. We have to manually configure this package in our Flutter project. So open your project’s pubspec.yaml file present in your flutter project.

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

Complete source code of my pubspec.yaml file:

3. Now we have to open our Flutter Project root folder in Terminal or CMD and execute flutter pub get command.

Now our project is configured successfully with http.dart package. Next step is to start coding for App.

4. Start Coding for Flutter App:

1. Open your project’s main.dart file and import material.dart, convert and http.dart package.

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

3. Create our main MyApp class extends StatelessWidget. This is our main layout class. In this class we would call the TransfterData() class.

4. Create a class named as TransfterData(). In this class we would call our next main class TransfterDataWidget with createState() method. This method would allow mutable state management in given class root tree.

5. Create our main class named as TransfterDataWidget extends with State full widget. In this class we would define all the widgets and perform web call.

6. Create 3 Text Field controller named as nameController, emailController and phoneNumberController using TextEditingController() method. Using this controller we can get the entered value in TextField widget.

7. Creating Boolean variable to show and hide the Circular progress indicator widget.

8. Create a function named as webCall() in TransfterDataWidget class. In this class we would send the text input data to online server. In this function we would first get the values from TextField widget and showing a Alert dialog message after successfully done the API web call.

9. Creating 3 TextField widgets, 1 Raised button widget and 1 CircularProgressIndicator widget in Widget build area in TransfterDataWidget class. We would call the webCall() method on button onPress event.

10. Complete source code for main.dart file:

Screenshots:

Insert_TextField_data_3

22 Comments

  1. asmanamaji’s server IP address could not be found.

  2. ha sir but data not store in database.showing on terminal only..

    • Asma Jo data variable jisme hum name,email, phone number pass kar rhe h uske sath single cot me ‘name’ h vo sab ke sab php file me same hone chahie.

  3. Hai actually mera pgm main problem jo mai insert kareso data quickely nai store hora database server par … plz suggest me.

  4. Thank you soo much ..sir its work properly.

  5. abdelrahman elmarakby

    can you help me to know what’s my host name and host password and my host user on 000webhost.com ??

    • You can find the host name, host password and host user. First select your website in 000webhost panel -> Tools -> Database manager.

  6. <?php

    $hostname = "localhost";
    $dbname = "id13512659_greengrocery";
    $user = "id13512659_greengrocer";
    $hostpassword = "zHc/@wlcI)7jG80W";

    $connect=new mysqli($hostname,$user,$hostpassword,$dbname);

    if($connect)
    {
    echo "connect";
    }
    else
    {
    echo "failed to connect to mysql";
    exit();
    }

    hey i have written this code in connection.php just to connect but whenever i checked in website it shows page not found

  7. Thank you for the reply. Yes like other one and Hope you will make soon. I really need it fast.

  8. Mohamed Chekraoui

    Dear
    I can’t use it in my own server 🙁
    msi-dz.com

  9. Thank you so much

  10. not working and showing int can not be cast to string error

Leave a Reply

Your email address will not be published.