flutter datatable how to add vertical border between columns - flutter

Question

I have a data table like below with three columns and I want to add vertical border separator , divider or whatever it called between all columns-included header- is this available in flutter datatables and how to do this ?
thanks
as a side note : I tried multiple options but it is hard to minuplate like listview or json_table package
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:talab/helpers/constant_helper.dart';
class TablesPage extends StatefulWidget {
#override
TablesPageState createState() => TablesPageState();
}
class TablesPageState extends State<TablesPage> {
// Generate a list of fiction prodcts
final List<Map> _products = List.generate(30, (i) {
return {"id": i, "name": "Product $i", "price": Random().nextInt(200) + 1};
});
int _currentSortColumn = 0;
bool _isAscending = true;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Kindacode.com'),
),
body: Container(
width: double.infinity,
child: SingleChildScrollView(
child: DataTable(
dividerThickness: 5,
decoration: BoxDecoration(
border:Border(
right: Divider.createBorderSide(context, width: 5.0),
left: Divider.createBorderSide(context, width: 5.0)
),
color: AppColors.secondaryColor,
),
showBottomBorder: true,
sortColumnIndex: _currentSortColumn,
sortAscending: _isAscending,
headingRowColor: MaterialStateProperty.all(Colors.amber[200]),
columns: [
DataColumn(label: Text('كود الطلب')
),
DataColumn(label: Text('الاشعار')),
DataColumn(
label: Text(
'التاريخ',
style: TextStyle(
color: Colors.blue, fontWeight: FontWeight.bold),
),),
],
rows: _products.map((item) {
return DataRow(cells: [
DataCell(Text(item['id'].toString())),
DataCell(Text(item['name'])),
DataCell(Text(item['price'].toString()))
]);
}).toList(),
),
),
));
}
}

Answer 1

As others have suggested, adding a vertical divider is one solution. Another is to use the DataTable's built-in border, which adds a border to every cell. It works like Border in the Decoration class. So, using your code example, the table can be defined:
DataTable(
border: TableBorder.all(
width: 5.0,
color:AppColors.secondaryColor,
dividerThickness: 5,
You can remove all of the other borders in your code. I believe this will give you the look you want.

Answer 2

As variant, you can use VerticalDivider widget. For example, define props of your vertical divider
Widget _verticalDivider = const VerticalDivider(
color: Colors.black,
thickness: 1,
);
and add it between header columns and cells
columns: [
DataColumn(label: Text('كود الطلب')),
DataColumn(label: _verticalDivider),
DataColumn(label: Text('الاشعار')),
DataColumn(label: _verticalDivider),
DataColumn(
label: Text(
'التاريخ',
style: TextStyle(
color: Colors.blue, fontWeight: FontWeight.bold),
),),
],
rows: _products.map((item) {
return DataRow(cells: [
DataCell(Text(item['id'].toString())),
DataCell(_verticalDivider),
DataCell(Text(item['name'])),
DataCell(_verticalDivider),
DataCell(Text(item['price'].toString()))
]);
}).toList(),

Answer 3

The following works for me:
DataTable(
showBottomBorder: true,
dividerThickness: 5.0,
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(''),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(''),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Albert')),
DataCell(VerticalDivider()),
DataCell(Text('19')),
DataCell(VerticalDivider()),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(VerticalDivider()),
DataCell(Text('43')),
DataCell(VerticalDivider()),
DataCell(Text('Professor')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(VerticalDivider()),
DataCell(Text('27')),
DataCell(VerticalDivider()),
DataCell(Text('Associate Professor')),
],
),
],
)