Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Row Width

Is it possible to define the size of the rows in flutter?

code:

Table(
  border: TableBorder.all(color: Colors.white30),
  defaultVerticalAlignment:
      TableCellVerticalAlignment.middle,
  children: [
    TableRow(
      decoration: BoxDecoration(
        color: Colors.blueGrey,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(12),
          topRight: Radius.circular(12),
        ),
      ),
      children: [
        // header da coluna
        for (var header in [
          "Id produção",
          "Id funcionário",
          "Cod Referencia",
          "Quantidade",
          "Hora Incial",
          "Hora Final",
          "Obs"
        ])
          TableCell(
            verticalAlignment:
                TableCellVerticalAlignment.middle,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                header,
                style: TextStyle(
                  color: Colors.white,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
      ],
    ),

I have looked if it can be done by any attribute but didn’t found yet.

Tags:

2

Answers


  1. 0

    One way to achieve this is by wrapping the content of each TableCell in a Container and setting the height of the Container.

    Table(
    border: TableBorder.all(color: Colors.white30),
            defaultVerticalAlignment: TableCellVerticalAlignment.middle,
            children: [
              TableRow(
                decoration: BoxDecoration(
                  color: Colors.blueGrey,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(12),
                    topRight: Radius.circular(12),
                  ),
                ),
                children: [
                  for (var header in [
                    "Id produção",
                    "Id funcionário",
                    "Cod Referencia",
                    "Quantidade",
                    "Hora Incial",
                    "Hora Final",
                    "Obs"
                  ])
                    TableCell(
                      verticalAlignment: TableCellVerticalAlignment.middle,
                      child: Container(
                        height: 50, // Set the height for the header row
                        padding: const EdgeInsets.all(8.0),
                        child: Center(
                          child: Text(
                            header,
                            style: TextStyle(
                              color: Colors.white,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
                    ),
                ],
              ),
              // Add more rows as needed
              TableRow(
                children: [
                  for (var cell in [
                    "1",
                    "123",
                    "ABC123",
                    "10",
                    "08:00",
                    "16:00",
                    "No issues"
                  ])
                    TableCell(
                      verticalAlignment: TableCellVerticalAlignment.middle,
                      child: Container(
                        height: 40, // Set the height for other rows
                        padding: const EdgeInsets.all(8.0),
                        child: Center(
                          child: Text(
                            cell,
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
                    ),
                ],
              ),
            ],
          ),
        ),
    Login or Signup to reply.
  2. 0

    By define columnWidths you can set width in table,

    Table(
  border: TableBorder.all(color: Colors.white30),
  columnWidths: const <int, TableColumnWidth>{
    0: IntrinsicColumnWidth(),// with intrinsic sizing
    1: FlexColumnWidth(), // with flex
    2: FixedColumnWidth(64), // with fixed size
    3: FractionColumnWidth(0.20), // with Fraction
  },
  defaultVerticalAlignment: TableCellVerticalAlignment.middle,
  children: <TableRow>[..your code..])

    For more information about Table

    Happy Coding!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search