How to change the background colour of a particular cell in flutter Table

Question

In my flutter project, I am implementing a table like structure using Table widget. I wanted to change/set the background colour of a particular cell of that table .

I have tried doing it by wrapping the Text widget of the particular cell with a Container Widget but the colour I am getting is not in a proper format. It doesn't fill the entire cell, rather it is covering only the middle portion of the cell like this: here is what I have created

I want the total Cell to be filled with red colour. Like: here is what I want to achieve

Here is my code for the Table :

class SlotsManagement extends StatefulWidget {
  @override
  _SlotsManagementState createState() => _SlotsManagementState();
}

class _SlotsManagementState extends State<SlotsManagement> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: aapBarSection('Slots Management', Colors.blueAccent[700],
          'Poppins-Medium', 16.0, context),
      body: Container(
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.all(10.0),
        child: Table(
          defaultColumnWidth: FixedColumnWidth(100.0),
          border: TableBorder.all(width: 1.0, color: Colors.black),
          textDirection: TextDirection.ltr,
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          // columnWidths: {0: FractionColumnWidth(.4)},
          children: [
            TableRow(children: [
              TableCell(
                  child: Text(
                '\*',
                style: TextStyle(fontSize: 10),
                textAlign: TextAlign.center,
              )),
              TableCell(
                  child: Text('Slot 1',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('Slot 2',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('Slot 3',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Monday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('1',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('A',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('B',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Tuesday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('2',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('C',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('D',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Wednesday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('3',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('E',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('F',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Thursday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('4',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Container(
                      color: Colors.redAccent,
                      child: Text('G',
                          style: TextStyle(fontSize: 10),
                          textAlign: TextAlign.center))),
              TableCell(
                  child: Text('H',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Friday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('5',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('I',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('J',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Saturday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('6',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('K',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('L',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Sunday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('7',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('M',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('N',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
          ],
        ),
      ),
    );
  }
}

I want to change the background colour of a particular cell (neither the entire row nor the entire column) . Here in my example, it is the cell where G has been written.

PS I am using the Table widget not the DataTable widget

Answer 1

you need to add this property to TableCells

verticalAlignment: TableCellVerticalAlignment.fill,

and add alignment property to Containers

alignment: Alignment.center,

like this

        TableCell(
          verticalAlignment: TableCellVerticalAlignment.fill,
          child: Container(
            color: Colors.redAccent,
            alignment: Alignment.center,
            child: Text('G', style: TextStyle(fontSize: 10), textAlign: TextAlign.center),
          ),
        )

but I'd recommend to create reusable widget

class Cell extends StatelessWidget {
  final String text;
  final Color color;

  Cell({@required this.text, @required this.color, Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TableCell(
      verticalAlignment: TableCellVerticalAlignment.fill,
      child: Container(
        color: color,
        alignment: Alignment.center,
        child: Text(text, style: TextStyle(fontSize: 10), textAlign: TextAlign.center),
      ),
    );
  }
}

like this

Cell(text: 'G', color: Colors.redAccent),

Answer 2

Try it out.

  TableCell(
              verticalAlignment: TableCellVerticalAlignment.fill,
              child: Container(
                alignment: Alignment.center,
                color: Colors.red,
                child: Text('4',
                    style: TextStyle(fontSize: 10),
                    textAlign: TextAlign.center),
              )),