How to resize a flutter table to take the whole available space?

user_484290 0
Viewed 46

I have a Flutter table that is currently being rendered in the Appbar title as follows:

enter image description here

My question is how to make the table take the maximum width and height of the AppBar?

The codes for defining the table in the Appbar is as follows:

Scaffold(
      appBar: AppBar(
        title: Table(
          border: TableBorder.all(),
          children: [
            TableRow(
              children: <Widget>[
                TableCell(
                  verticalAlignment: TableCellVerticalAlignment.middle,
                  child: Center(child: Text("GPS"),),
                ),
                TableCell(
                  verticalAlignment: TableCellVerticalAlignment.middle,
                  child: Center(child: Text("GPS"),),
                ),
                TableCell(
                  verticalAlignment: TableCellVerticalAlignment.middle,
                  child: Center(child: Text("GPS"),),
                ),
                TableCell(
                  verticalAlignment: TableCellVerticalAlignment.middle,
                  child: Center(child: Text("GPS"),),
                )
              ],
            )
          ],
        ),
      ))

Below is what I want to achieve:

enter image description here

flutter-appbar flutter-widget flutter-layout flutter
1 Answers

Firstly, provide height on TableCell,

TableCell(
  verticalAlignment: TableCellVerticalAlignment.middle,
  child: Container(
    height: kToolbarHeight,
    alignment: Alignment.center,
    child: Text("GPS"),
  ),
),

Option 1

You can use leadingWidth: 0,titleSpacing: 0, on AppBar.

AppBar(
  leadingWidth: 0,
  titleSpacing: 0,
  title: myTable(),
),

Option 1 rendering:

enter image description here

Option 2

Also I think you will like using PreferredSize and customize the way you like

appBar: PreferredSize(
  preferredSize: const Size.fromHeight(kToolbarHeight),
  child: Container(
    height: kToolbarHeight,
    color: Colors.blue,
    child: myTable(),
  ),
),

Option 2 rendering:

enter image description here

If you like to have the border, you can wrap your Table with Padding

title: Padding(
  padding: const EdgeInsets.all(1),
  child: myTable(),
),
user_101571270
Related