How to set vertical and horizontal border in flutter datatable?
831
Using DataTable decoration
can be used to have table border. to have inner-border line, we can put VerticalDivider()
widget inside columns
and every DataRow's cells
.
As you can see I'm just missing centering Text.
Widget buildTable(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(dividerColor: Colors.black),
child: DataTable(
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.black,
)),
columns: const <DataColumn>[
DataColumn(label: Text("Sport", textAlign: TextAlign.center)),
DataColumn(label: VerticalDivider()),
DataColumn(
label: Text("Total Players", textAlign: TextAlign.center))
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Soccer')),
DataCell(VerticalDivider()),
DataCell(Text("11")),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Hockey')),
DataCell(VerticalDivider()),
DataCell(Text("11")),
],
),
],
),
);
}
Author by
abhipsa biswal
Updated on December 27, 2022Comments
-
abhipsa biswal over 1 year
As I am new to flutter, I could not set the
border
inDataTable
. Can anybody tell me how can I do that by usingDataTable
Widget? As per my requirement, I have to give borders between each rows and columns. Only I found theshowBottomBorder
properties in that but not satisfied! because I have to do a table like structure with black borders in each rows and columns. Please help me how can I achieve this!Thanks in advance :)
Below is my code.
Widget bodyData(PatientDataNotifier patientDataNotifier) { return SingleChildScrollView( scrollDirection: Axis.horizontal, child: DataTable( onSelectAll: (b) {}, sortColumnIndex: 1, sortAscending: true, columns: <DataColumn>[ DataColumn( label: Text('Profile'), numeric: false, ), DataColumn( label: Text('Name'), numeric: false, onSort: (i, b) { // patientDataNotifier.sortPatient(); print('$i $b'); }, tooltip: 'First Name'), DataColumn( label: Text('Age'), numeric: false, ), DataColumn( label: Text('Assigned Slots'), numeric: false, ), DataColumn( label: Text('Completed Slots'), numeric: false, ) ], rows: patientDataNotifier.patientMaster.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: PreferredSize( preferredSize: const Size.fromHeight(80), child: Consumer<PatientDataNotifier>( builder: (context, patientDataNotifier, _){ return appBarSection('Patient Details', patientDataNotifier); }, ), ), //appBar: appBarSection('Patient Details'), body: Container( child: Consumer<PatientDataNotifier>( builder: (context, patientDataNotifier, _){ return bodyData(patientDataNotifier); }, ), ), ); } Widget appBarSection(String title, PatientDataNotifier patientDataNotifier) { 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, ), ), ), ), ], ); }