You can download project from :
https://unpossiblepog.com/codes/DART+FLUTTER/Flutter-And-Dart-Convert-SQFLITE-Data-Into-Map-And-Display-That-Data-In-Table-UI
Note : Watch the video if you are confused to you want to see the practical approach of instructions which are given below.
########## START ##########
1. Copy-paste the following code just after the declaration of class which is extending the state.
List employeeFinalList;
2. Copy-paste following function just before the ending curly bracket of the same class which is extending the state.
void fixOutputInRows(List<Map<String, dynamic>> emp_data)
{
var columns=new List();
var rows_values=new List();
var properDataArray=new List();
String first_column="";
int loop_run=1;
columns=[];
rows_values=[];
properDataArray=[];
for(var i=0;i<emp_data.length;i++)
{
int col_position=0;
int found_all_colums=0;
Map m=emp_data[i];
m.forEach((k,v) =>
{
if(loop_run==1)
{
first_column='${k}',
},
if(loop_run>1 && first_column=='${k}')
{
found_all_colums=1,
},
if(found_all_colums!=1)
{
columns.add('${k}'),
},
if(loop_run==1)
{
loop_run++,
},
rows_values.add('${v}'),
}
);
}
var added_rows=0;
double total_rows=0;
if(columns.length>0)
{
total_rows=(rows_values.length/columns.length) as double;
}
//print("Total rows : "+(total_rows).toString());
int value_get_count=0;
for(var i=0;i<total_rows;i++)
{
Map temp_array={};
for(var j=0;j<columns.length;j++)
{
temp_array[columns[j]]=rows_values[value_get_count];
value_get_count++;
}
properDataArray.add(temp_array);
}
print(properDataArray);
if(total_rows>0)
{
setState((){
this.employeeFinalList = properDataArray;
});
}
}
3. Call that function just after the “for loop” where we can are getting the data from database table.
fixOutputInRows(emp_data);
4. Remove the whole “Center” function and copy-paste the following the code, make sure that it ends with comma (,)
Column(children:
<Widget>[
Padding(
padding: const
EdgeInsets.all(8.0),
child:
getDynamicTable(),
)])
5. Add the following code just after the ending curly bracket of “Widget build(BuildContext context)”
Table
getDynamicTable()
{
List<TableRow> rows = [];
rows.add(TableRow(children: [
Text("Id"),
Text("Name"),
Text("Address"),
]));
if(employeeFinalList!=null)
{
for
(int
i = 0;
i
< this.employeeFinalList.length;
++i)
{
rows.add(TableRow(children:
[
Text(""+employeeFinalList[i]['id'].toString()),
Text("" +
employeeFinalList[i]['name'].toString()),
Text("" +
employeeFinalList[i]['address'].toString()),
]));
}
}
return
Table(
border:TableBorder.all(width:
2.0,color:
Colors.black),
columnWidths:
{
0:
FixedColumnWidth(100.0),
0:
FixedColumnWidth(100.0),
1:
FlexColumnWidth(),
},
children:
rows,
);
}
6. If you want data to be displayed as soon as the app is loaded, then add the following code inside the curly bracket of “Widget build(BuildContext context)”
if(employeeFinalList==null)
{
DBConDisplay();
}
Previous flutter tutorial (Flutter Database Connection):- https://youtu.be/S95X7Jp7xeM
Code
Link:-
https://unpossiblepog.blogspot.com/2021/03/show-database-table-rows-in-flutter-table-ui.html
Subscribe
my Channel:-
http://www.youtube.com/user/SanketRooney?sub_confirmation=1
Facebook Page:- https://www.facebook.com/UnpossibleNS
Twitter Account:- https://twitter.com/UnpossiblePOG
Blog
:- https://unpossiblepog.blogspot.in/
-------------------------------
In my last flutter database tutorial, I displayed data from table but in columns rather than rows.
This
tutorial is a continuation of the previous tutorial.
In
this video, we
shall display data
in
flutter table. This
tutorial is divided into
2 phases.
Phase 1 is where we are converting data from separate columns into map.
In phase 2, we are displaying those map values in table rows.
If you already have the map structure ready, then skip to phase 2.
Also, I provided the code link in the description, you just have to copy-paste the code as per the instructions.
1st point says, we have to copy-paste the line just after the declaration of a class which is extending the STATE.
2nd point is to copy-paste the whole code just before the ending curly bracket of the same class which is extending the State.
3rd point is to, paste this line after the for loop inside the function which we created to get table data. In my case, the function name is DBConDisplay.
Now, lets refresh the project and see if there map is displaying the data or not.
If the map is displaying in a proper format, it means that our first phase is complete.
In second phase, we shall be adding that map inside flutter table.
So according to the 4th point, remove the CENTER function completely and add the code given in the 4th point. Make sure to add comma at the end of the code where you pasted that function.
As you can see, android studio shows an error at getDyanamicTable function because we haven’t created that function yet.
From 5th point, copy the code and paste it just after the ending curly bracket of widget build function.
Save it.
Now if you have HOT RELOAD enabled, you will see the table appeared on ANDROID SIMULATOR screen. If not, don’t worry. Just go to the 6th point.
From 6th point, copy the code and paste it inside widget build’s curly bracket.
Now, refresh the app, it will display the data as soon as the app loads.
I added some unnecessary texts here, I shall remove it from the document.
So that is it, thanks for watching. Like share and subscribe.
