Reorderable List View Flutter with Sqlflite Combination - flutter

Question

I am trying to figure out to collect user's education information.
I successfully add delete update my database.
Additionally I made a list to show user what they entered so far. Like Elementary school, highchool, bachelors etc. I wanted to let user drag and drop the entries in the order they like.
I came up with the following code I am showing the user basic information such as school name, degree and field of study. Which I retrieve from database.
I am stuck at this point. I am using id to list the data id's are going like 1 2 3 4 5 once the user enters data in but when user tries to enter data in at it is correctly working. But onReoerder function and update order function is not correctly working.
ReorderableListView(
children: List.generate(_educationList.length, (index) {
final education = _educationList[index];
education.key = ValueKey(education.id!);
print(education.id);
return Card(
key: ValueKey(education.id),
elevation: 4,
margin: EdgeInsets.all(8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'School name:',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(education.schoolName ?? ''),
SizedBox(height: 8),
Text(
'Degree:',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(education.degree ?? ''),
SizedBox(height: 8),
Text(
'Field of study:',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(education.fieldOfStudy ?? ''),
],
),
),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: Size(75, 40),
elevation: 2.0,
backgroundColor: Color(0xff2ec4b6),
),
onPressed: () {
// Edit the education item
editEducation(education);
_isEditing = true;
},
child: Text('Edit'),
),
SizedBox(height: 8),
ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: Size(75, 40),
elevation: 2.0,
backgroundColor: Color(0xffff9f1c),
),
onPressed: () {
// Remove the education item from the list
setState(() {
_educationList.removeAt(index);
print(education.id!);
Education.instance.delete(education.id!);
});
},
child: Text('Delete'),
),
],
),
],
),
),
);
}),
onReorder: (oldIndex, newIndex) {
setState(() {
if (newIndex > oldIndex) {
newIndex -= 1;
}
final item = _educationList.removeAt(oldIndex);
_educationList.insert(newIndex, item);
// Update the order of the items in the database
Education.instance.updateOrder(_educationList[oldIndex].id!, _educationList[newIndex].id!);
// Update the key of the item
item.key = ValueKey(_educationList[newIndex].id!);
});
},
)
//And this is my basics of database:
Future updateOrder(int originalIndex, int newIndex) async {
final db = await instance.database;
//update the id of the moved row
await db.update(_tableName, {_columnId: newIndex}, where: '$_columnId = ?', whereArgs: [originalIndex]);
//loop through all the rows in the table
final List<Map<String, dynamic>> rows = await db.query(_tableName);
for(int i = 0; i < rows.length; i++) {
if(i != newIndex) {
final int currentId = rows[i][_columnId];
//update the id of the row if it's affected by the move
if(currentId == originalIndex || currentId == newIndex) {
await db.update(_tableName, {_columnId: i}, where: '$_columnId = ?', whereArgs: [currentId]);
}
}
}
}
Education({
this.id,
this.schoolName,
this.degree,
this.fieldOfStudy,
});