CODEWITHSUNDEEP
flutterdartflutter-layoutbaseline
TheEggHealer
TheEggHealer

Reputation: 193

Align text baseline with text inside a column, using Flutter

I'm having trouble aligning widgets. I have seen questions on here asking about similar things, however, none of them seem to work for my specific task. I'm trying to create a widget containing an icon and two text widgets. The icon is supposed to be centered over the first text widget, and the other text widget is supposed to be aligned with the baseline of the first.

The way I have gone about doing this is to place the icon and the first text widget in a column, and then place that column in a row together with the second text widget. I'm using crossAxisAlignment: CrossAxisAlignment.baseline and textBaseline: TextBaseline.ideographic in the row widget but for some reason the second text aligns with the icon. It looks like this:

enter image description here

If I instead use crossAxisAlignment: CrossAxisAlignment.end the text widgets do not align properly:

enter image description here

I have tried to put the text widgets in a row and place them in a column together with the icon, but then the icon is no longer centered over the first text widget:

enter image description here

Here's the code used for the first image, the other images are just rearrangements of the same code.

return Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.ideographic,
  children: [
    Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          widget.icon,
          color: color_text_highlight,
          size: 20,
        ),
        Text(
          widget.data,
          style: TextStyle(
            fontSize: 28,
            fontFamily: 'Quicksand',
            color: color_text_highlight,
          ),
        ),
      ],
    ),

    SizedBox(width: 5),

    Text(
        widget.label,
        style: TextStyle(
          fontSize: 12,
          fontFamily: 'Roboto',
          color: color_text_dark,
        )
    ),
  ],
);

Any help is appreciated!

Upvotes: 8

Views: 27090

Answers (3)

martinseal1987
martinseal1987

Reputation: 2419

Row allows for a crossAxisAlignment of baseline, set the text baseline too or it will throw an error

        Row(
          crossAxisAlignment: CrossAxisAlignment.baseline,
          textBaseline: TextBaseline.alphabetic,

Upvotes: 1

Pavel
Pavel

Reputation: 5876

Column defines its own baseline as a baseline of its first child*. That's why the label at right gets aligned to the bottom of icon:

example screenshot

A simple fix is to make "17:59" the first child of the Column (the icon will go below now) and then use VerticalDirection.up to swap them back:

example screenshot

Row(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Column(
      mainAxisSize: MainAxisSize.min,
      verticalDirection: VerticalDirection.up, // <-- reverse direction
      children: [
        Text('17:59', style: TextStyle(fontSize: 32)), // <-- first child
        Icon(Icons.timer),
      ],
    ),
    Text('mm:ss'),
  ],
)

* actually, of first child that has a baseline itself, anyway Icon does have it

Upvotes: 23

mkf
mkf

Reputation: 494

There may be a solution like this, but the solution may cause problems because it depends on the font size. You will need to change the padding value accordingly.

   Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Column(
                children: [
                  Icon(
                    Icons.timer,
                    color: Colors.lightGreen,
                    size: 20,
                  ),
                  Text(
                    "17:59",
                    style: TextStyle(
                      fontSize: 28,
                      fontFamily: 'Quicksand',
                      color: Colors.lightGreen,
                    ),
                  ),
                ],
              ),
              SizedBox(width: 5),
              Padding(
                padding: EdgeInsets.only(bottom: 4),
                child: Text("mm:ss",
                    style: TextStyle(
                      fontSize: 12,
                      fontFamily: 'Roboto',
                      color: Colors.white70,
                    )),
              ),
            ],
          ),
        ],
      )

Google Nexus 9 Tablet Google Nexus 9 Tablet

Google Pixel 3a XL Google Pixel 3a XL

Google Pixel 2 Google Pixel 2

Upvotes: 3

Related Questions