CODEWITHSUNDEEP
flutterflutter-layout
Etienne
Etienne

Reputation: 2287

Flutter baseline text alignment with Wrap class

Using the Row class, I can make the text baseline aligned with this property:

crossAxisAlignment: CrossAxisAlignment.baseline,

But this property seems not to be available on the Wrap class. The benefit of using Wrap instead of Row is that it allows having multiline text. While the Row class force the content to stay into one line.

How can I keep the benefit of Wrap, while making the text baseline aligned?

Upvotes: 1

Views: 1076

Answers (2)

Nick Bradshaw
Nick Bradshaw

Reputation: 56

I also had this problem. There is an open issue in the Flutter Repo addressing this. While the built-in solution is not implemented yet, I did come up with a slightly-hacky workaround.

Basically, depending on your font and your needs...

Set your Wrap() to have crossAxisAlignment: WrapCrossAlignment.end,. Then you can make one of the children of your Wrap() a Column() that has a SizedBox() as the lowest child, with the height that you need to make it appear like your texts are using the does-not-exist WrapCrossAlignment.baseLine

Example of the problem:

enter image description here

Example of the solution as outlined above (I did point out that it's kind of hacky): enter image description here

The Code:

class WrapBaselineHackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(border: Border.all(color: Colors.red)),
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.end,
        spacing: 8,
        children: [
          Text(
            '\$50,000.00',
            style: TextStyle(fontSize: 24),
          ),
          Column(
            children: [
              Text('Is a lot of money'),
              //this is needed because Wrap does not have WrapCrossAlignment.baseLine
              const SizedBox(height: 3),
            ],
          ),
        ],
      ),
    );
  }
}

Upvotes: 2

Vishal
Vishal

Reputation: 129

Keep using Row and simply wrap Text widget with Expanded or Flexible widget.

Upvotes: 0

Related Questions