Align Text widgets in a row widget

13
votes

I've got a row with 3 text widgets in it.

The middle text entry can span several lines, but the first two will be really small.

I'm wanting to have the first widget have the text at the top of the row and the 3rd widget to have the text at the bottom of the row.

It's basically something similar to this image

enter image description here

So basically the first widget would be the opening quote, then the 3rd the ending quote.

I can set a crossAxisAlignment on the row to start or end and that will move the quotes, but it'll move both of them.

At the moment I've got something like this:

return Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Text('"'),
      ),
      Expanded(
        child: Text(
          entry.text,
          style: style,
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        color: Colors.yellow,
        child: Text(
          '”',
          textAlign: TextAlign.start,
        ),
      ),
    ],
  );

but I'm not sure how to align the bottom quote to the bottom of the text, at the moment it sits at the top.

3
flutterflutter-layout

3 Answers

11
votes

IntrinsicHeight is the widget you are looking for. It's working fine with that widget.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new IntrinsicHeight(
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Align(
            alignment: Alignment.topLeft,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text('"'),
            ),
          ),
          Expanded(
            child: Text(
              "The middle text entry can span several lines, but the first two will be really small. I'm wanting to have the first widget have the text at the top of the row and the 3rd widget to have the text at the bottom of the row. It's basically something similar to this image"
            ),
          ),
          new Align(
            alignment: Alignment.bottomRight,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text(
                '”',
                textAlign: TextAlign.start,
              ),
            ),
          ),
        ],
        ),
      ));
  }
3
votes

You can always do Column -> [Expanded(text), Expanded(Container(), Expanded(text)] and adjust the flex of the blank box as needed.

There's also Container (or Column/Row) -> Stack -> [Column(mainAxis start), Column(mainAxis end)].

Work smarter, not harder. IntrinsicHeight widget is computationally expensive and I would not recommend using it for this.

2
votes

one idea would be to create a Stack, than wrap the Text() with Positioned widget. position left quote to top: and left: and right quote to bottom: right:. and wrap middle text with Container, calculate the remaining size from MediaQuery.of(context).size.width - qouoteWidth*2 and set fixed size to container and position it at calculated coordinates.

I am sure there are other solutions as well