Flutter - Text not visible inside FlatButton with FittedBox

Question

I am learning flutter and trying to design a table consisting of cells with FlatButtons intended to perform some operation. When I am trying to create a TableCell with FlatButton, the FlatButton text is getting rendered vertically and when I am using FittedBox to align it horizontally the FlatButton text disappears, what might be going wrong here and is there any workaround for the same? Please find the code snippet below

Widget build(BuildContext context) {
    final deviceSize = MediaQuery.of(context).size;
    return Stack(
      children: [
        Container(
          height: deviceSize.height,
          width: deviceSize.width,
          decoration: const BoxDecoration(
            gradient: LinearGradient(colors: [
              Color(0xffee0979),
              Color(0xffff6a00),
              //Color(0xff29ffc6),
            ], begin: Alignment.bottomRight),
          ),
        ),
        Container(
          margin: EdgeInsets.only(bottom: 200),
          child: Center(
            child: Card(
              margin: EdgeInsets.all(12),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
              elevation: 15,
              child: Container(
                alignment: Alignment.topRight,
                height: deviceSize.height * 0.70,
                width: double.infinity,
                padding: EdgeInsets.all(12.0),
                child: Table(
                  border: TableBorder.all(width: 1.2),
                  children: [
                    for (var i = 0; i < 15; i++)
                      TableRow(
                        children: [
                          for (var j = 0; j < 15; j++)
                            TableCell(
                                verticalAlignment:
                                    TableCellVerticalAlignment.middle,
                                child: FlatButton(
                                  onPressed: () {},
                                  child: FittedBox(child: Text('Test')),
                                )),
                        ],
                      ),
                  ],
                ),
              ),
            ),
          ),
        ),
        Container(
          alignment: Alignment.bottomCenter,
          margin: EdgeInsets.only(bottom: 60),
          child: RaisedButton(
            onPressed: () {},
            elevation: 10,
            textColor: Colors.white,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
            color: Theme.of(context).primaryColor,
            child: Container(
              width: 100,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.assignment),
                  SizedBox(
                    width: 10,
                  ),
                  Text('Instructions')
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Thanks in advance for your valuable time!

Answer 1

The problem is not alignment or fitting text inside the cell. It's because the amount of column you put in a row is a lot to be display normally on the screen.

What you can do is to reduce the number of Column:

TableRow(
                    children: [
                      for (var j = 0; j < 5; j++)
                        TableCell(
                            verticalAlignment:
                                TableCellVerticalAlignment.middle,
                            child: FlatButton(
                              onPressed: () {},
                              child: Text('Test'),
                            )),
                    ],
                  ),

If you want to fit 15 columns in a row without scrollview. Use a SizedBox:

TableRow(
                      children: [
                        for (var j = 0; j < 5; j++)
                          SizedBox(
                            width: 50,
                            child: TableCell(
                              verticalAlignment:
                                  TableCellVerticalAlignment.middle,
                              child: FittedBox(
                                  child: FlatButton(
                                onPressed: null,
                                child: Text('Test'),
                              )),
                            ),
                          ),
                      ],
                    ),

Or put the Table inside a SingleChildScrollView with scrollDirection to be horizontal like this:

SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Table(
                columnWidths: {
                  0: IntrinsicColumnWidth(),
                  1: IntrinsicColumnWidth(),
                  2: IntrinsicColumnWidth(),
                  3: IntrinsicColumnWidth(),
                  4: IntrinsicColumnWidth(),
                },
                border: TableBorder.all(width: 1.2),
                children: [
                  for (var i = 0; i < 15; i++)
                    TableRow(
                      children: [
                        for (var j = 0; j < 5; j++)
                          TableCell(
                              verticalAlignment:
                                  TableCellVerticalAlignment.middle,
                              child: FlatButton(
                                onPressed: null,
                                child: Text('Test'),
                              )),
                      ],
                    ),
                ],
              ),
            ),

Hope this help!

Answer 2

Adding a container inside the FittedBox to hold the child text might do the trick.