How to customize the border of Flutter Datatable Row, Column and Cell?

Viewed 8240

I have a black background Flutter app, and when adding Datatable widget, the border and text is not visible. I have added TextStyle color for all labels, but how do I do it for border?

DataTable(columns: [
    DataColumn(label: Center(child: Text('DATE', style: TextStyle(color: Colors.grey)))),
    DataColumn(label: Center(child: Text('FANS', style: TextStyle(color: Colors.grey)))),
    DataColumn(
        label: Text('LIKES', style: TextStyle(color: Colors.grey))),
    DataColumn(
        label:
            Text('EST. EARNINGS', style: TextStyle(color: Colors.grey))),
  ],

      rows: [
        DataRow(cells: [
          DataCell(Text('1')),
          DataCell(Text('2')),
          DataCell(Text('3')),
          DataCell(Text('4')),
        ])
      ]),
1 Answers

You can use the Theme widget and overriding the dividerColor.

Here is the sample code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(_title),
          backgroundColor: Colors.grey,
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Theme(
          data: Theme.of(context).copyWith(dividerColor: Colors.grey),
          child: DataTable(columns: [
            DataColumn(
              label: Container(
                width: 35,
                child: Center(
                  child: Text(
                    'DATE',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
            ),
            DataColumn(
              label: Container(
                width: 35,
                child: Center(
                  child: Text(
                    'FANS',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
            ),
            DataColumn(
              label: Container(
                width: 40,
                child: Center(
                  child: Text(
                    'LIKES',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
            ),
            DataColumn(
              label: Container(
                width: 100,
                child: Center(
                  child: Text(
                    'EST. EARNINGS',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
            ),
          ], rows: [
            DataRow(cells: [
              DataCell(
                Text(
                  '1',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              DataCell(
                Text(
                  '2',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              DataCell(
                Text(
                  '3',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              DataCell(
                Text(
                  '4',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
            ])
          ]),
        ),
      ),
    );
  }
}

And this is the actual output:

enter image description here

Related