How to change the size of a TableRow in Flutter

Question

I have created a method to automatically create a weekly table, which has a row for each hour, from 7 to 22. The size of the hourly squares is too big by default, and I can't get it smaller. I would like them to be the same height as the row for the days of the week. I would also like to know how to give the TextField an id and a backgroundColor.

Imagen view

List<TableRow> getFilas(Size size) {
    List<TableRow> childs = [];
    childs.add(TableRow(children: [
      Text("Domingo", textAlign: TextAlign.center),
      Text("Sábado", textAlign: TextAlign.center),
      Text("Viernes", textAlign: TextAlign.center),
      Text("Jueves", textAlign: TextAlign.center),
      Text("Miércoles", textAlign: TextAlign.center),
      Text("Martes", textAlign: TextAlign.center),
      Text("Lunes", textAlign: TextAlign.center),
      Text(" "),
    ]));
    for (int i = 7; i <= 22; i++) {
      childs.add(TableRow(children: [
        TextField(),
        TextField(),
        TextField(),
        TextField(),
        TextField(),
        TextField(),
        TextField(),
        Text("${i.toString()}:00", textAlign: TextAlign.center),
      ]));
    }
    return childs;
  }

I have tried with "TextScaleFactor", "maxLines" and "height". Both editing the TableRow and the TextField.

Answer 1

You can set the height of each individual child in the TableRow by wrapping each child in a Container and setting the height property of the Container.

TableRow(
  children: [
    Container(
      height: 50,
      child: TextField(),
    ),
    Container(
      height: 50,
      child: TextField(),
    ),
    Container(
      height: 50,
      child: TextField(),
    ),
    // ...add other children here
  ],
)

To give a TextField an ID, you can use the key property. This property can be used to identify and reference the TextField in your code.

TextField(
  key: ValueKey('my_text_field'), // give the TextField an ID
)

To set the background color of a TextField, you can use the decoration property and specify the fillColor property of the InputDecoration object.

TextField(
  decoration: InputDecoration(
    fillColor: Colors.red
))