DataTable's DataCell Background Color

datacell-background-color-main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columnSpacing: 0,
      columns: const <DataColumn>[
        DataColumn(
          label: Expanded(
            child: Text(
              'Name',
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
          ),
        ),
        DataColumn(
          label: Expanded(
            child: Text(
              'Age',
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
          ),
        ),
        DataColumn(
          label: Expanded(
            child: Text(
              'Role',
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
          ),
        ),
      ],
      rows: <DataRow>[
        DataRow(
          cells: <DataCell>[
            const DataCell(Text('Sarah')),
            DataCell(
              SizedBox.expand(

                  // Use container to fill the background color
                  child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      color: Colors.yellow,

                      // Align text to middle
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text(
                          "19",
                          textAlign: TextAlign.center,
                        ),
                      ),
                  ),
              ),
            ),
            const DataCell(Text('Student')),
          ],
        ),
        DataRow(
          cells: <DataCell>[
            const DataCell(Text('Janine')),
            DataCell(
              SizedBox.expand(

                  // Use container to fill the background color
                  child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      color: Colors.yellow,

                      // Align text to middle
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text(
                          "43",
                          textAlign: TextAlign.center,
                        ),
                      ),
                  ),
              ),
            ),
            const DataCell(Text('Professor')),
          ],
        ),
        DataRow(
          cells: <DataCell>[
            const DataCell(Text('William')),
            DataCell(
              SizedBox.expand(

                  // Use container to fill the background color
                  child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      color: Colors.yellow,

                      // Align text to middle
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text(
                          "27",
                          textAlign: TextAlign.center,
                        ),
                      ),
                  ),
              ),
            ),
            DataCell(
              SizedBox.expand(

                  // Use container to fill the background color
                  child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      color: Colors.red,

                      // Align text to middle
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text(
                          'Associate Professor',
                          textAlign: TextAlign.center,
                        ),
                      ),
                  ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}