top of page

[Flutter/dart] Table is useful to align Widget


Overview


When aligning the positions of multiple widgets with Flutter, I think that you often use Column for vertical alignment and Row for horizontal alignment. However, when you want to align both the vertical and horizontal positions, it may be difficult to use both Row and Column together. In such a case, it is convenient to use Table.



Example


For example, suppose you want Widgets A and B to be placed horizontally and centered vertically, and Widget C to be centered horizontally below Widget B.



At this time, if A and B are put in Row, B and C cannot be centered horizontally. It is possible to make adjustments with SizedBox, but it will probably shift when the screen size changes.


@override
Widget build(BuildContext context) {

  return Scaffold(
      appBar: AppBar(
        title: Text('demo'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Row(
              children: [
                widgetA(),
                SizedBox(width: 16,),
                widgetB()
              ],
            ),
            SizedBox(height: 16,),
            Row(
              children: [
                SizedBox(width: 40,),
                widgetC()
              ],
            )
          ],
        )
      )
  );
}

Widget widgetA(){
  return Icon(
    Icons.calendar_today,
    color: Colors.black,
  );
}

Widget widgetB(){
  return Icon(
    Icons.help,
    color: Colors.blue,
  );
}

Widget widgetC(){
  return Icon(
    Icons.edit,
    color: Colors.red,
  );
}
The position of widgetC (pencil) was adjusted with SizedBox.

Also, if B and C are put in Column, A and B cannot be centered vertically.


In this case, use Table.



@override
Widget build(BuildContext context) {

  return Scaffold(
    appBar: AppBar(
      title: Text('demo'),
    ),
    body: Container(
      padding: const EdgeInsets.all(16),
      child: Table(
        defaultColumnWidth: IntrinsicColumnWidth(),
        children: [
          TableRow(
            children: [
              widgetA(),
              SizedBox(width: 16,),
              widgetB()
            ],
          ),
          TableRow(
            children: [
              SizedBox(width: 0,),
              SizedBox(width: 16,),
              widgetC()
            ]
          )
        ],
      )
    )
  );
}

Put the widgets you want to line up horizontally in TableRow.

This time, I want widgetC to be under widgetB, so I will adjust it by putting a SizedBox with a width of 0 in the part under widgetA.

The width of each column is determined by the defaultColumnWidth. This time it fits the width of the child widget (IntrinsicColumnWidth ()).


With this, you can easily adjust the position!

Align with Table

Summary


Consider Table if you want to align your widgets both vertically and horizontally!


Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page