CODEWITHSUNDEEP
flutterdart
Hasen
Hasen

Reputation: 12336

Flutter align text to the width of the text above

I want to align the small text so it is flush with the right edge of the larger text above but TextAlign is ignored unless you add a width in Container around the individual text widget.

Container(
  child: Column(
    children: <Widget>[
      Text('One', style: TextStyle(fontSize: 40)),
      Text('Two', textAlign: TextAlign.right, style: TextStyle(fontSize: 30)),
    ],
  ),
),

I can't set a width since then it will not be the same for different devices. It should simply align right based on the width of the larger text above but it doesn't.

A width value should not be necessary since the width should be set by the width of the larger text, but without a width value TextAlign is ignored for some strange reason.

enter image description here

I need it to look like this:

enter image description here

Upvotes: 2

Views: 3217

Answers (1)

Kirill Matrosov
Kirill Matrosov

Reputation: 6010

We can combine CrossAxisAlignment.stretch for Column widget and IntrinsicWidth widget. IntrinsicWidth

Sizes its child's width to the child's maximum intrinsic width.

Center(
  child: 
     Container(
        child:
            IntrinsicWidth(
               child: 
                  Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                         children: <Widget>[
                            Text('The title', style: TextStyle(fontSize: 40)),
                            Text('small', textAlign: TextAlign.right, style: TextStyle(fontSize: 30)),
                         ],
        )))

It looks like this enter image description here

PS Perhaps you dont need Container widget here

Upvotes: 4

Related Questions