Flutter DataTable + MySQL - MOBILE PROGRAMMING
Flutter DataTable + MySQL - MOBILE PROGRAMMING
MOBILE PROGRAMMING
https://www.youtube.com/channel/UC5lbdURzjB0irr-FTbjWN1A/
Menu
Menu
In this demo we will create a futter app that communicates with the Server and create a table,
insert records, update records, fetch all records and delete records.
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
If you want to learn using SQLite in Flutter, then follow this link.
Server Side
In the Server I am creating a script inside a folder named “EmployeesDB”.
We will we connecting to the database and do a insert, update, select and delete in the
database.
<?php
$servername = "localhos";
$username = "root";
$password = "";
$dbname = "TesDB";
$table = "Employees"; // lets create a table named Employees.
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
// Create Connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check Connection
if($conn->connect_error){
die("Connection Failed: " . $conn->connect_error);
return;
}
// If connection is OK...
// Add an Employee
if("ADD_EMP" == $action){
// App will be posing these values to this server
$frs_name = $_POST["frs_name"];
$las_name = $_POST["las_name"];
$sql = "INSERT INTO $table (frs_name, las_name) VALUES ('$frs_name', '$las_name')";
$result = $conn->query($sql);
echo "success";
$conn->close();
return;
}
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
// Delete an Employee
if('DELETE_EMP' == $action){
$emp_id = $_POST['emp_id'];
$sql = "DELETE FROM $table WHERE id = $emp_id"; // don't need quotes since id is an integer.
if($conn->query($sql) === TRUE){
echo "success";
}else{
echo "error";
}
$conn->close();
return;
}
?>
Flutter Side
Now we have the server side ready. Next we will create the model class for the object coming
from the Server.
Its an employee record which has an id, frs_name and a las_name. You can look at the
create table query in the php code above.
Employee Model
Create a new fle named Employee.dart and copy the below contents.
class Employee {
String id;
String frsName;
String lasName;
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Now we will create a service class to call the Webs Services with the proper action like create,
update etc.
Create a new fle named Services.dart and copy this code into it.
import 'dart:convert';
import 'package:http/http.dart'
as http; // add the http plugin in pubspec.yaml fle.
import 'Employee.dart';
class Services {
satic cons ROOT = 'http://localhos/EmployeesDB/employee_actions.php';
satic cons _CREATE_TABLE_ACTION = 'CREATE_TABLE';
satic cons _GET_ALL_ACTION = 'GET_ALL';
satic cons _ADD_EMP_ACTION = 'ADD_EMP';
satic cons _UPDATE_EMP_ACTION = 'UPDATE_EMP';
satic cons _DELETE_EMP_ACTION = 'DELETE_EMP';
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
In the above code you can see that we are using the http package for service calls and the
pos parameters are sent in the form of a map.
To include the http package update your pubspec.yaml fle like this
dependencies:
futter:
sdk: futter
http: "0.11.3+17"
...
The below code will create a DataTable with columns ID, FIRST NAME, LAST NAME, DELETE
(action).
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: [
DataColumn(
label: Text('ID'),
),
DataColumn(
label: Text('FIRST NAME'),
),
DataColumn(
label: Text('LAST NAME'),
),
// Lets add one more column to show a delete button
DataColumn(
label: Text('DELETE'),
)
],
rows: _employees
.map(
(employee) => DataRow(cells: [
DataCell(
Text(employee.id),
// Add tap in the row and populate the
// textfelds with the corresponding values to update
onTap: () {
_showValues(employee);
// Set the Selected employee to Update
_selectedEmployee = employee;
setState(() {
_isUpdating = true;
});
},
),
DataCell(
Text(
employee.frsName.toUpperCase(),
),
onTap: () {
_showValues(employee);
// Set the Selected employee to Update
_selectedEmployee = employee;
// Set fag updating to true to indicate in Update Mode
setState(() {
_isUpdating = true;
});
},
),
DataCell(
Text(
employee.lasName.toUpperCase(),
),
onTap: () {
_showValues(employee);
// Set the Selected employee to Update
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
_selectedEmployee = employee;
setState(() {
_isUpdating = true;
});
},
),
DataCell(IconButton(
icon: Icon(Icons.delete),
onPressed: () {
_deleteEmployee(employee);
},
))
]),
)
.toLis(),
),
),
);
}
The variable employees is initialized by getting employees from the service by calling the
getEmployees() function in the Services class.The getEmployees() will return a json with
felds id, frs_name and las_name which will be mapped to the Employee object by using
Employee.fromJson() method.
_getEmployees() {
_showProgress('Loading Employees...');
Services.getEmployees().then((employees) {
setState(() {
_employees = employees;
});
_showProgress(widget.title); // Reset the title...
print("Length ${employees.length}");
});
}
import 'package:futter/material.dart';
import 'Employee.dart';
import 'Services.dart';
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
//
DataTableDemo() : super();
@override
DataTableDemoState createState() => DataTableDemoState();
}
@override
void initState() {
super.initState();
_employees = [];
_isUpdating = false;
_titleProgress = widget.title;
_scafoldKey = GlobalKey(); // key to get the context to show a SnackBar
_frsNameController = TextEditingController();
_lasNameController = TextEditingController();
_getEmployees();
}
_showSnackBar(context, message) {
_scafoldKey.currentState.showSnackBar(
SnackBar(
content: Text(message),
),
);
}
_createTable() {
_showProgress('Creating Table...');
Services.createTable().then((result) {
if ('success' == result) {
// Table is created successfully.
_showSnackBar(context, result);
_showProgress(widget.title);
}
});
}
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
_getEmployees() {
_showProgress('Loading Employees...');
Services.getEmployees().then((employees) {
setState(() {
_employees = employees;
});
_showProgress(widget.title); // Reset the title...
print("Length ${employees.length}");
});
}
_updateEmployee(Employee employee) {
setState(() {
_isUpdating = true;
});
_showProgress('Updating Employee...');
Services.updateEmployee(
employee.id, _frsNameController.text, _lasNameController.text)
.then((result) {
if ('success' == result) {
_getEmployees(); // Refresh the lis after update
setState(() {
_isUpdating = false;
});
_clearValues();
}
});
}
_deleteEmployee(Employee employee) {
_showProgress('Deleting Employee...');
Services.deleteEmployee(employee.id).then((result) {
if ('success' == result) {
_getEmployees(); // Refresh after delete...
}
});
}
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
_lasNameController.text = '';
}
_showValues(Employee employee) {
_frsNameController.text = employee.frsName;
_lasNameController.text = employee.lasName;
}
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
setState(() {
_isUpdating = true;
});
},
),
DataCell(
Text(
employee.lasName.toUpperCase(),
),
onTap: () {
_showValues(employee);
// Set the Selected employee to Update
_selectedEmployee = employee;
setState(() {
_isUpdating = true;
});
},
),
DataCell(IconButton(
icon: Icon(Icons.delete),
onPressed: () {
_deleteEmployee(employee);
},
))
]),
)
.toLis(),
),
),
);
}
// UI
@override
Widget build(BuildContext context) {
return Scafold(
key: _scafoldKey,
appBar: AppBar(
title: Text(_titleProgress), // we show the progress in the title...
actions: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () {
_createTable();
},
),
IconButton(
icon: Icon(Icons.refresh),
onPressed: () {
_getEmployees();
},
)
],
),
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
children: <Widget>[
Padding(
padding: EdgeInsets.all(20.0),
child: TextField(
controller: _frsNameController,
decoration: InputDecoration.collapsed(
hintText: 'Firs Name',
),
),
),
Padding(
padding: EdgeInsets.all(20.0),
child: TextField(
controller: _lasNameController,
decoration: InputDecoration.collapsed(
hintText: 'Las Name',
),
),
),
// Add an update button and a Cancel Button
// show these buttons only when updating an employee
_isUpdating
? Row(
children: <Widget>[
OutlineButton(
child: Text('UPDATE'),
onPressed: () {
_updateEmployee(_selectedEmployee);
},
),
OutlineButton(
child: Text('CANCEL'),
onPressed: () {
setState(() {
_isUpdating = false;
});
_clearValues();
},
),
],
)
: Container(),
Expanded(
child: _dataBody(),
),
],
),
),
foatingActionButton: FloatingActionButton(
onPressed: () {
_addEmployee();
},
child: Icon(Icons.add),
),
);
}
}
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
DataTable Flutter
toUppercase
Related Poss
Select Image from Camera/Gallery, Save Image in App’s Directory in separate Thread, Load Image from App’s
Directory to UI.
← Working With Low-Level Isolate APIs in Flutter Google’s Flutter Tutorial – Save Image as String in
Sreejith
September 30, 2019
Bro, Please upload neares people user shower using lat, long by google map project.
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Reply ↓
Sreejith
October 14, 2019
I am a beginner of the Android platform using futter VSCode .two days before I have
upgraded Flutter upgrade –force command. After successful upgrade, I have tried to build
the app and its working in emulator but not working on my mobile phone. Error message
in my phone is App Not Insalled message. I am so suck in this case. Please help me
Reply ↓
Try uninsalling the app and reinsall after changing the package.
Reply ↓
J.English
October 22, 2019
Its a great tutorial, Please do a video on a continuous scrolling using php and mysql
(using http requess).
Thanks in advance.
Reply ↓
Reply ↓
TahorSuiJuris
October 23, 2019
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Q. Can one deploy as a desktop app (platform-independent) with the local MySql fle?
Reply ↓
harrylee
February 13, 2020
Reply ↓
daniel
May 12, 2020
hi
I have The same problem .
I’m new to Flutter and doesn’t know much about complex json parsing , please help me
Reply ↓
Reply ↓
bigmarn
February 19, 2020
Reply ↓
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Reply ↓
dayat
March 29, 2020
Reply ↓
Reply ↓
Very nice but in this blog please add “Employee.dart” so that people will not get any
errors. I am new in futter but had experience in android development.
Once again nice work.
Note: For “Employee.dart” see the video and carefully write this class.
Reply ↓
MohammedRais Shaikh
April 21, 2020
Hi,
I am using windows 10. I am trying to communicate the xamp server, but I got an error
“Connection refuse”.
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Reply ↓
Alex Muchau
April 25, 2020
Reply ↓
Make sure you are sending the parameters from Client side.
Reply ↓
Alex Muchau
April 27, 2020
What ? I’m a beginner at programmation. My server side code is the same as yours
What can i do to fx ?
Reply ↓
shaaban
April 26, 2020
please
1-
error: Target of URI doesn’t exis: ‘package:http/http.dart’. (uri_does_not_exis at
[futterapp1] lib\Services.dart:2)
2-
error: The argument type ‘int’ can’t be assigned to the parameter type ‘String’.
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
thanks
Reply ↓
1. package:http/http.dart’ as http;
2. Change your type of employee id from ‘String’ to ‘int’
Reply ↓
Wilfred
May 26, 2020
Reply ↓
Reply ↓
Mikoyskie
May 31, 2020
hello bro,
below are the mediaquery error, i can’t fx it… hope it will be resolve
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
════
I/futter (11425): The following assertion was thrown building DataTableDemo(sate:
DataTableDemoState#fa534):
I/futter (11425): MediaQuery.of() called with a context that does not contain a
MediaQuery.
I/futter (11425): No MediaQuery ancesor could be found sarting from the context that
was passed to MediaQuery.of().
I/futter (11425): This can happen because you do not have a WidgetsApp or MaterialApp
widget (those widgets introduce
I/futter (11425): a MediaQuery), or it can happen if the context you use comes from a
widget above those widgets.
I/futter (11425): The context used was:
I/futter (11425): Scafold
I/futter (11425):
I/futter (11425): The relevant error-causing widget was:
I/futter (11425): DataTableDemo
fle:///C:/xampps/htdocs/EmployeesDB/employees_project/lib/main.dart:5:10
I/futter (11425):
I/futter (11425): When the exception was thrown, this was the sack:
I/futter (11425): #0 MediaQuery.of (package:futter/src/widgets/media_query.dart:813:5)
I/futter (11425): #1 ScafoldState.didChangeDependencies
(package:futter/src/material/scafold.dart:2172:50)
I/futter (11425): #2 StatefulElement._frsBuild
(package:futter/src/widgets/framework.dart:4661:12)
I/futter (11425): #3 ComponentElement.mount
(package:futter/src/widgets/framework.dart:4476:5)
I/futter (11425): … Normal element mounting (9 frames)
I/futter (11425): #12 Element.infateWidget
(package:futter/src/widgets/framework.dart:3446:14)
I/futter (11425): #13 Element.updateChild
(package:futter/src/widgets/framework.dart:3214:18)
I/futter (11425): #14 RenderObjectToWidgetElement._rebuild
(package:futter/src/widgets/binding.dart:1148:16)
I/futter (11425): #15 RenderObjectToWidgetElement.mount
(package:futter/src/widgets/binding.dart:1119:5)
I/futter (11425): #16 RenderObjectToWidgetAdapter.attachToRenderTree.
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
(package:futter/src/widgets/binding.dart:1061:17)
I/futter (11425): #17 BuildOwner.buildScope
(package:futter/src/widgets/framework.dart:2607:19)
I/futter (11425): #18 RenderObjectToWidgetAdapter.attachToRenderTree
(package:futter/src/widgets/binding.dart:1060:13)
I/futter (11425): #19 WidgetsBinding.attachRootWidget
(package:futter/src/widgets/binding.dart:941:7)
I/futter (11425): #20 WidgetsBinding.scheduleAttachRootWidget.
(package:futter/src/widgets/binding.dart:922:7)
I/futter (11425): (elided 11 frames from class _RawReceivePortImpl, class _Timer,
dart:async, and dart:async-patch)
I/futter (11425):
I/futter (11425):
════════════════════════════════════════════════════════
════════════════════════════════════════════
Syncing fles to device Android SDK built for x86 64… 5,133ms (!)
Reply ↓
Reply ↓
Wandile
June 5, 2020
Reply ↓
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Reply ↓
azam
June 6, 2020
Reply ↓
Reply ↓
Niels
June 9, 2020
Jus wanna express my gratitude, this has been so unbelievably helpful! Very very good
guide!
Reply ↓
Thankyou.
Reply ↓
Asaad
June 20, 2020
Hi, thanks for the video. Two quesions. Flutter or Swift frs, which is the bes and why?
Second, where is the link to download php´s and code futter? regards
Reply ↓
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Marcos
June 29, 2020
Reply ↓
Marcos, you can follow the same method to insert a lis. Insead of sending srings, jus
send a json array sring and insert in database.
Reply ↓
Nadia
July 3, 2020
Please,
I got this error:
I tried implement in my own data. When i run my url in insomnia, i get this value. Can you
help me, why i get this error? Thank you.
Reply ↓
Reply ↓
atif khan
Augus 11, 2020
Hello James, i have the same issue The method ‘map’ was called on null. Receiver: null. I
undersand you already said the answer I’m new to futter and i knew that your the one
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
_employee = [];
even in the bitbucket you give us an nulled array can you pls help me what to do to
remove the error
Reply ↓
Joemarie Amar
July 7, 2020
Hi,
Thanks for this wonderful tutorial. i fnd the source code link broken. Is there other way to
download the source?
Reply ↓
Reply ↓
Nas
November 27, 2020
Reply ↓
Reply ↓
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
river
November 29, 2020
If you don’t mind, if there is a place where you should change your assets
I would like you to tell me
Reply ↓
Check in services.dart
Reply ↓
Leave a Reply
Your email address will not be published. Required felds are marked *
Comment
Name *
Email *
Website
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Post Comment
Search
Search
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Sign Me Up!
My Other Blogs
Visit My Blog
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING
Popular Poss
How to create Simple Login form using php in android? – Connect php with android.
Copyright 2018
https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]