You are on page 1of 31

Flutter DataTable + MySQL – MOBILE PROGRAMMING

MOBILE PROGRAMMING
https://www.youtube.com/channel/UC5lbdURzjB0irr-FTbjWN1A/

Menu
Menu

Flutter DataTable + MySQL


By James | September 28, 2019

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.

The Data from the Server will be displayed in a DataTable .

https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING

Flutter Data Table + MySQL

Watch Video Tutorial

https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING

Here I am using XAMPP to create a local Server.


You can download XAMPP from here.
https://www.apachefriends.org/download.html

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.

The script will look like this

<?php

$servername = "localhos";
$username = "root";
$password = "";
$dbname = "TesDB";
$table = "Employees"; // lets create a table named Employees.

// we will get actions from the app to do operations in the database...


$action = $_POST["action"];

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...

// If the app sends an action to create the table...


if("CREATE_TABLE" == $action){
$sql = "CREATE TABLE IF NOT EXISTS $table (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
frs_name VARCHAR(30) NOT NULL,
las_name VARCHAR(30) NOT NULL
)";

if($conn->query($sql) === TRUE){


// send back success message
echo "success";
}else{
echo "error";
}
$conn->close();
return;
}

// Get all employee records from the database


if("GET_ALL" == $action){
$db_data = array();
$sql = "SELECT id, frs_name, las_name from $table ORDER BY id DESC";
$result = $conn->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$db_data[] = $row;
}
// Send back the complete records as a json
echo json_encode($db_data);
}else{
echo "error";
}
$conn->close();
return;
}

// 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

// Remember - this is the server fle.


// I am updating the server fle.
// Update an Employee
if("UPDATE_EMP" == $action){
// App will be posing these values to this server
$emp_id = $_POST['emp_id'];
$frs_name = $_POST["frs_name"];
$las_name = $_POST["las_name"];
$sql = "UPDATE $table SET frs_name = '$frs_name', las_name = '$las_name' WHERE id = $emp_id";
if($conn->query($sql) === TRUE){
echo "success";
}else{
echo "error";
}
$conn->close();
return;
}

// 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

Employee({this.id, this.frsName, this.lasName});

factory Employee.fromJson(Map<String, dynamic> json) {


return Employee(
id: json['id'] as String,
frsName: json['frs_name'] as String,
lasName: json['las_name'] as String,
);
}
}

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';

// Method to create the table Employees.


satic Future<String> createTable() async {
try {
// add the parameters to pass to the reques.
var map = Map<String, dynamic>();
map['action'] = _CREATE_TABLE_ACTION;
fnal response = await http.pos(ROOT, body: map);
print('Create Table Response: ${response.body}');
if (200 == response.satusCode) {
return response.body;
} else {
return "error";
}
} catch (e) {
return "error";
}
}

satic Future<Lis<Employee>> getEmployees() async {


try {
var map = Map<String, dynamic>();
map['action'] = _GET_ALL_ACTION;
fnal response = await http.pos(ROOT, body: map);

https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING

print('getEmployees Response: ${response.body}');


if (200 == response.satusCode) {
Lis<Employee> lis = parseResponse(response.body);
return lis;
} else {
return Lis<Employee>();
}
} catch (e) {
return Lis<Employee>(); // return an empty lis on exception/error
}
}

satic Lis<Employee> parseResponse(String responseBody) {


fnal parsed = json.decode(responseBody).cas<Map<String, dynamic>>();
return parsed.map<Employee>((json) => Employee.fromJson(json)).toLis();
}

// Method to add employee to the database...


satic Future<String> addEmployee(String frsName, String lasName) async {
try {
var map = Map<String, dynamic>();
map['action'] = _ADD_EMP_ACTION;
map['frs_name'] = frsName;
map['las_name'] = lasName;
fnal response = await http.pos(ROOT, body: map);
print('addEmployee Response: ${response.body}');
if (200 == response.satusCode) {
return response.body;
} else {
return "error";
}
} catch (e) {
return "error";
}
}

// Method to update an Employee in Database...


satic Future<String> updateEmployee(
String empId, String frsName, String lasName) async {
try {
var map = Map<String, dynamic>();
map['action'] = _UPDATE_EMP_ACTION;
map['emp_id'] = empId;
map['frs_name'] = frsName;
map['las_name'] = lasName;
fnal response = await http.pos(ROOT, body: map);
print('updateEmployee Response: ${response.body}');
if (200 == response.satusCode) {
return response.body;
} else {
return "error";
}
} catch (e) {
return "error";
}
}

https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING

// Method to Delete an Employee from Database...


satic Future<String> deleteEmployee(String empId) async {
try {
var map = Map<String, dynamic>();
map['action'] = _DELETE_EMP_ACTION;
map['emp_id'] = empId;
fnal response = await http.pos(ROOT, body: map);
print('deleteEmployee Response: ${response.body}');
if (200 == response.satusCode) {
return response.body;
} else {
return "error";
}
} catch (e) {
return "error"; // returning jus an "error" sring to keep this simple...
}
}
}

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"
...

Let’s create the Main UI.

We will be displaying the employee lis in a DataTable.

The below code will create a DataTable with columns ID, FIRST NAME, LAST NAME, DELETE
(action).

// Let's create a DataTable and show the employee lis in it.


SingleChildScrollView _dataBody() {
// Both Vertical and Horozontal Scrollview for the DataTable to
// scroll both Vertical and Horizontal...

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}");
});
}

Similarly we can have Insert, Update and Delete actions.

The Complete UI will look like this…

import 'package:futter/material.dart';
import 'Employee.dart';
import 'Services.dart';

class DataTableDemo extends StatefulWidget {

https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING

//
DataTableDemo() : super();

fnal String title = 'Flutter Data Table';

@override
DataTableDemoState createState() => DataTableDemoState();
}

class DataTableDemoState extends State<DataTableDemo> {


Lis<Employee> _employees;
GlobalKey<ScafoldState> _scafoldKey;
// controller for the Firs Name TextField we are going to create.
TextEditingController _frsNameController;
// controller for the Las Name TextField we are going to create.
TextEditingController _lasNameController;
Employee _selectedEmployee;
bool _isUpdating;
String _titleProgress;

@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();
}

// Method to update title in the AppBar Title


_showProgress(String message) {
setState(() {
_titleProgress = message;
});
}

_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

// Now lets add an Employee


_addEmployee() {
if (_frsNameController.text.isEmpty || _lasNameController.text.isEmpty) {
print('Empty Fields');
return;
}
_showProgress('Adding Employee...');
Services.addEmployee(_frsNameController.text, _lasNameController.text)
.then((result) {
if ('success' == result) {
_getEmployees(); // Refresh the Lis after adding each employee...
_clearValues();
}
});
}

_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...
}
});
}

// Method to clear TextField values


_clearValues() {
_frsNameController.text = '';

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;
}

// Let's create a DataTable and show the employee lis in it.


SingleChildScrollView _dataBody() {
// Both Vertical and Horozontal Scrollview for the DataTable to
// scroll both Vertical and Horizontal...
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

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

Watch my youtube video to see all the above code in action.

Source Code link:


https://bitbucket.org/vipinvijayan1987/tutorialprojects/src/MySQLDataTable/FlutterTutorialProje
cts/futter_demos/

More Similar Poss

SQlite Database Operations in Flutter


ng-repeat Simple Demo in Angular JS with flter
Ofine Database from WebService using SQFlite in Flutter
Easily Parse JSON, Create JSON Model Classes, Show…
Google's Flutter Tutorial - Save Image as String in…
Chat Application in Flutter Using Socket IO
Socket Programming in Flutter, Build Chat Apps in Flutter
Auto Generate JSON Models in Flutter, Filtering a…
Flutter Tutorial - Upload Image in Flutter Using PHP
Flutter Tutorials - DataTable (Android & iOS).
Load Local html fle into WebView in Flutter. Call…
Flutter Tutorial - Complete GridView Tutorial
Flutter - Android, iOS , Native communication Simple Demo
GridView Demo in Flutter
Implementing GCM in Android
Video Tutorials
Load data from internet to a GridView in Flutter…

https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING

Easy StateManagement in Flutter using Providers,…


Service Call in Flutter with Retry Button, Catch…
Network Connectivity in Flutter
How to do a Lis fltering in Angular JS?
Room Database from Google - A Simple Example
Flutter Tutorials - AutoComplete TextField
Doing HTTP Calls in Flutter and Parsing Data
Using Cusom Fonts in Flutter

DataTable Flutter

connection Flutter Data Table MySQL Services Snackbar TextEditingController toLowercase

toUppercase

Related Poss

Theming your App in Flutter using BLoc, Save & Reload

Local Notifcations in Flutter

Select Image from Camera/Gallery, Save Image in App’s Directory in separate Thread, Load Image from App’s
Directory to UI.

Chat Application in Flutter Using Socket IO

← Working With Low-Level Isolate APIs in Flutter Google’s Flutter Tutorial – Save Image as String in

Local Storage and Retrieve – Preferences →

42 thoughts on “Flutter DataTable + MySQL ”

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 ↓

James Pos author


October 15, 2019

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 ↓

James Pos author


October 23, 2019

Checkout my lates video tutorial here…


https://www.youtube.com/watch?v=OwyoCJ7hki0

Reply ↓

TahorSuiJuris
October 23, 2019

Shall complete your tutorial today!

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

why my getEmployee function doesn’t work?


i tesed it and it seems that “return parsed.map((json) =>
Employee.fromJson(json)).toLis();” in ” parseResponse” doesn’t work either.

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 ↓

James Pos author


May 12, 2020

What is the issue?

Reply ↓

bigmarn
February 19, 2020

D/libc-netbsd(23007): getaddrinfo: localhos get result from proxy gai_error = 0


It keeps showing me the error above when i click the add icon button for Create Table

Reply ↓

James Pos author


February 22, 2020

Are you able to access your server via browser?

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

I get issue when shoot this link :


http://localhos:8080/EmployeesDB/employee_actions.php

SocketException: OS Error: Connection refused, errno=111, address=localhos,


port=38752

Reply ↓

James Pos author


March 29, 2020

Your local server is not running.

Reply ↓

Muhammad Adnan Ijaz


April 5, 2020

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”.

What should I do to resolve this issue?

Kindly reply as soon as possible.

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

Hello, someone can help me ? my server side(php) have this error

Notice: Undefned index: action in C:\xampp\htdocs\EmployeesDB\employee_actions.php


on line 9

I`ve tried everythink, but i coundn`t manage


Kindly reply as soon as possible.

Reply ↓

James Pos author


April 26, 2020

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

(argument_type_not_assignable at [futterapp1] lib\DataTableDemo.dart:157) employee.id

thanks

Reply ↓

James Pos author


April 26, 2020

1. package:http/http.dart’ as http;
2. Change your type of employee id from ‘String’ to ‘int’

Reply ↓

Wilfred
May 26, 2020

Thanks for this, where is the fle:


http://localhos/EmployeesDB/employee_actions.php

Reply ↓

James Pos author


May 26, 2020

employee_actions.php is the server side script which I am explaining in the youtube


video. Please watch and let me know if you fnd any difculties.
Thanks.

Reply ↓

Mikoyskie
May 31, 2020

hello bro,
below are the mediaquery error, i can’t fx it… hope it will be resolve

Insalling build\app\outputs\apk\app.apk… 3.1s


Syncing fles to device Android SDK built for x86 64…
I/futter (11425): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY
╞═══════════════════════════════════════════════════════

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 ↓

James Pos author


June 6, 2020

You are calling MediaQuery on a wrong context

Reply ↓

Wandile
June 5, 2020

Hi, I could login before but now it is giving me an Error.


[ERROR:futter/lib/ui/ui_dart_sate.cc(157)] Unhandled Exception: FormatException:
Unexpected character (at character 1).
Please help

Reply ↓

James Pos author


June 6, 2020

https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]
Flutter DataTable + MySQL – MOBILE PROGRAMMING

when are you getting error?

Reply ↓

azam
June 6, 2020

hai..where is Employee.dart fle?

Reply ↓

James Pos author


June 7, 2020

Updated the Article with Employee.dart. Sorry about that.

Reply ↓

Niels
June 9, 2020

Jus wanna express my gratitude, this has been so unbelievably helpful! Very very good
guide!

Reply ↓

James Pos author


June 24, 2020

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

How do I insert a lis in mysql with futter?

Reply ↓

James Pos author


June 29, 2020

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:

The method ‘map’ was called on null.


Receiver: null
Tried calling: map(Closure: (Ticket) => DataRow)

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 ↓

James Pos author


July 3, 2020

Your array is NULL.

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

who made the array nulled here:

_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 ↓

James Pos author


July 17, 2020

Please check here.

Reply ↓

Nas
November 27, 2020

I have a problem with the app.


I did all the required seps, but the values i write in frs name and las name did not show
up in the database. Is there a reason for this? There are no error messages.

Reply ↓

James Pos author


December 6, 2020

Please check services.dart and make changes according to your server.

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

I got an asset from git hub


There are no particular errors,
Could not get data from table

If you don’t mind, if there is a place where you should change your assets
I would like you to tell me

Reply ↓

James Pos author


December 6, 2020

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

Get Updates on Tutorials

Subscribe To Our Newsletter


Subscribe to our mailing lis and receive lates news and updates from our team.

Enter your name here

Enter your email here

Sign Me Up!

My Other Blogs

Visit My Blog

Check CoderzHeaven on Blogspot

Professional essay writer of hire online 24/7.


Will you write my paper? You don't need to ask. That is what we do!
Myessaygeek.com can write your essay and surpise you with discounts.

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.

Android phpMysql connection

FREE Google Plus Invitations

Expandable LisView in ANDROID using SimpleExpandableLisAdapter, a simple example.

ANDROID – Upload an image to Server in Android Studio

Copyright 2018

Iconic One Pro Theme | Powered by Wordpress

https://www.coderzheaven.com/2019/09/28/flutter-datatable-mysql/[27/12/2020 20:58:41]

You might also like