user-interfaceflutterdartdatatableflutter-layout

Flutter: Is there any way to change the row line color of DataTable?


I'm using DataTable in my recent app and i need to change the color of the row line or make it invisible (i mean I don't want to my table shows any row line)

If anyone knows please help! thanks


Solution

  • Use Theme widget and overriding the dividerColor as shown below.

    enter image description here

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return _MyHomePageState();
      }
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Theme(
              data: Theme.of(context).copyWith(
                  dividerColor: Colors.green
              ),
              child: DataTable(
                  columns: [
                    DataColumn(label: Text('Language')),
                    DataColumn(label: Text('Year'))
                  ],
                  rows: [
                    DataRow(
                      cells: [
                        DataCell(Text('Go')),
                        DataCell(Text('2009'))
                      ],
                    ),
                    DataRow(
                      cells: [
                        DataCell(Text('Dart')),
                        DataCell(Text('2018'))
                      ],
                    ),
                    DataRow(
                      cells: [
                        DataCell(Text('Java')),
                        DataCell(Text('1992'))
                      ],
                    ),
                  ]
              ),
            ),
          ),
        );
      }
    }