How to Send data from flutter app to MySQL Database

Sending data from flutter app to server is very important feature for every android/ios application. That makes our application dynamic. This tutorial is helpful for beginners who wish to understand dynamic content management in flutter . In this tutorial i am going to do some basic programming and learn how to insert data from application to MySQL database using flutter and PHP .

1.Create a new flutter project in vscode or android studio using flutter create appname

2. Creating a database on your phpmyadmin :

Database is very important because without database there is no possible way to creating tables. Now make an database on your PHPMYADMIN

3.Create a table in your database :

Create a table in your database named as registereduser and create four columns id, name, mobile,email into that table .

4. Now Upload your PHP script on your server :

After finishing table creation process just upload the below two PHP scripts on your server using file manager. There are two different type of files present here first one is config.php file and second is insertdata.php file. Please change the details of your server in config.php file.

config.php

	$username="admin";//change username 
	$password="admin"; //change password
	$host="localhost";
	$db_name="databasename"; //change databasename
	

	$connect=mysqli_connect($host,$username,$password,$db_name);
	

	if(!$connect)
	{
		echo json_encode("Connection Failed");
	}
	

	?>

insertdata.php

<?php 
	include "config.php";
	// REGISTER USER
	

	  
	    $name = mysqli_real_escape_string($connect, $_POST['name']);
	    $email = mysqli_real_escape_string($connect, $_POST['email']);
	    $mobile = mysqli_real_escape_string($connect, $_POST['mobile']);
	  
	 
	        $query = "INSERT INTO registereduser (name, email,mobile)
	  			  VALUES('$name', '$email','$mobile')";
	    $results = mysqli_query($connect, $query);
	    if($results>0)
	    {
	        echo "user added successfully";
	    }
	    
	    
	

	

	    
	    

	    ?>

5. Check your PHP script :

After done uploading procedure just open the insertdata.php file URL in your web browser and you can see that its showing us the user added Successfully message and when you open the PhpMyAdmin control panel there is a blank value inserted in your table. This value is blank because there is no such data present for insertion.

6.Now it’s time to write code in flutter

After done all the back-end procedure now it’s time to write some code for flutter.so in this app simply we create three textfield named as a name,email & mobile.

7.Now we will create a function for sending data into mysql

Future<List> senddata() async {
	  final response = await http.post("http://raushanjha.in/insertdata.php", body: {
	    "name": user.text,
	    "email": pass.text,
	    "mobile":mobile.text,
	  });
	

	  var datauser = json.decode(response.body);

8.Complete Code of main.dart file

import 'dart:async';
	import 'dart:convert';
	

	import 'package:flutter/material.dart';
	import 'package:http/http.dart' as http;
	

	void main() => runApp(new MyApp());
	

	String username='';
	

	class MyApp extends StatelessWidget {
	  
	  @override
	  Widget build(BuildContext context) {
	    return new MaterialApp(
	      debugShowCheckedModeBanner: false,
	      title: 'Flutter App with MYSQL',     
	      home: new MyHomePage(),
	     
	    );
	  }
	}
	

	class MyHomePage extends StatefulWidget {
	  @override
	  _MyHomePageState createState() => _MyHomePageState();
	}
	

	class _MyHomePageState extends State<MyHomePage> {
	

	TextEditingController name=new TextEditingController();
	TextEditingController email=new TextEditingController();
	TextEditingController mobile=new TextEditingController();
	

	Future<List> senddata() async {
	  final response = await http.post("http://raushanjha.in/insertdata.php", body: {
	    "name": name.text,
	    "email": email.text,
	    "mobile":mobile.text,
	  });
	}
	

	  @override
	  Widget build(BuildContext context) {
	    return Scaffold(
	      appBar: AppBar(title: Text("Register"),),
	      body: Container(
	        child: Center(
	          child: Column(
	            children: <Widget>[
	              Text("Username",style: TextStyle(fontSize: 18.0),),
	              TextField(   
	                controller: name,                
	                decoration: InputDecoration(
	                  hintText: 'name'
	                ),           
	                ),
	              Text("Email",style: TextStyle(fontSize: 18.0),),
	              TextField(  
	                controller: email,      
	                 decoration: InputDecoration(
	                  hintText: 'Email'
	                ),                
	                ),
	                Text("Mobile",style: TextStyle(fontSize: 18.0),),
	              TextField(  
	                controller: mobile,        
	                 decoration: InputDecoration(
	                  hintText: 'Mobile'
	                ),                
	                ),
	              
	              RaisedButton(
	                child: Text("Register"),
	                onPressed: (){
	                  senddata;
	                },
	              ),
	

	             
	

	            ],
	          ),
	        ),
	      ),
	    );
	}

	}