How to do search functionality in datatable in flutter? - flutter

Question

I am new to flutter and I could not do searching of data in datatable in my flutter project.
Please anyone help me how to achieve this functionality in datatable. So that when I click on search box as per the name, I will be able to find that data in my table.
Thanks in advance.
Below is my code.
patient.dart
class PatientInfo{
String profile_pic;
String name;
int age;
String assigned_slots;
String completed_slots;
PatientInfo({this.profile_pic, this.name, this.age, this.assigned_slots, this.completed_slots});
}
var details = <PatientInfo>[
PatientInfo(
profile_pic: 'https://s3.amazonaws.com/empoweringparents-uploads/young-children-back-to-school-fb.jpg',
name: 'A',
age: 9,
assigned_slots: 'yes',
completed_slots: 'yes'
),
PatientInfo(
profile_pic: 'https://www.freeiconspng.com/thumbs/school-children-png/school-children-png-5.png',
name: 'Lucy',
age: 10,
assigned_slots: 'yes',
completed_slots: 'No'
),
PatientInfo(
profile_pic: 'https://images.unsplash.com/photo-1552457309-e45be97707ce?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8aW5kaWFuJTIwY2hpbGR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
name: 'Susan',
age: 12,
assigned_slots: 'yes',
completed_slots: 'yes'
),
PatientInfo(
profile_pic: 'https://assets.theindusparent.com/wp-content/uploads/sites/9/gallery/top-9-things-you-should-never-do-to-you-babies/137448603.jpg',
name: 'Peter',
age: 14,
assigned_slots: 'No',
completed_slots: 'yes'
),
PatientInfo(
profile_pic: 'https://s3.amazonaws.com/empoweringparents-uploads/young-children-back-to-school-fb.jpg',
name: 'Edmund',
age: 15,
assigned_slots: 'yes',
completed_slots: 'No'
),
];
homescreen.dart
class PatientDetails extends StatefulWidget {
#override
_PatientDetailsState createState() => _PatientDetailsState();
}
class _PatientDetailsState extends State<PatientDetails> {
TextEditingController nameController = TextEditingController();
Widget bodyData(){
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
onSelectAll: (b) {},
sortColumnIndex: 1,
sortAscending: true,
columns: <DataColumn>[
DataColumn(
label: Text('Profile'),
numeric: false,
onSort: (i, b){
// setState(() {
// ......
// });
print('$i $b');
},
),
DataColumn(
label: Text('Name'),
numeric: false,
onSort: (i, b){
setState(() {
details.sort((a, b) => a.name.compareTo(b.name));
});
print('$i $b');
},
),
DataColumn(
label: Text('Age'),
numeric: false,
onSort: (i, b){
// setState(() {
//.....
// });
print('$i $b');
},
),
DataColumn(
label: Text('Assigned Slots'),
numeric: false,
onSort: (i, b){
// setState(() {
//......
// });
print('$i $b');
},
),
DataColumn(
label: Text('Completed Slots'),
numeric: false,
onSort: (i, b){
// setState(() {
//........
// });
print('$i $b');
},
)
],
rows: details.map((detail)=> DataRow(
cells: [
DataCell(CircleAvatar(radius: 25, backgroundImage: NetworkImage(detail.profile_pic),)),
DataCell(Text(detail.name), showEditIcon: false),
DataCell(Text(detail.age.toString()), showEditIcon: false),
DataCell(Text(detail.assigned_slots), showEditIcon: false),
DataCell(Text(detail.completed_slots), showEditIcon: false)
],
),
).toList()
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: appBarSection('Patient Details'),
body: Container(
child: bodyData(),
),
);
}
Widget appBarSection(String title){
return AppBar(
title: Text(title),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 150,
child: TextFormField(
controller: nameController,
decoration: InputDecoration(
hintText: "Search",
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
isDense: true,
suffixIcon: Icon(Icons.search, color: Colors.white),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(
color: Colors.white,
width: 2.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(style: BorderStyle.none),
),
filled: true,
fillColor: Colors.lightBlue.shade200,
),
),
),
),
],
);
}
}
Please help me!