CODEWITHSUNDEEP
fluttervertical-alignment
MarsMan
MarsMan

Reputation: 21

Flutter align Column of text with single text

I would like to make this in Flutter:

Desired result

My code:

Row(
             children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [
                Text('Total', style: TextStyle( color: Color(0xFF68B762)),),
                Text('Km', style: TextStyle( color: Color(0xFF68B762)),),
              ],),
              const Text('612', style: TextStyle(fontSize: 30, fontFamily: SecondaryFontMedium, color: Color(0xFF68B762)),),
            ],),

Result:

Actual result

Upvotes: 0

Views: 539

Answers (5)

iamrishan
iamrishan

Reputation: 104

changing the font size and make the row align center gives your desired result in any font

see result

Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Total',
                  style: TextStyle(
                    color: Color(0xFF68B762),
                  ),
                ),
                Text(
                  'Km',
                  style: TextStyle(
                    color: Color(
                      0xFF68B762,
                    ),
                  ),
                ),
              ],
            ),
            Text(
              '612',
              style: TextStyle(
                fontSize: 40,
                color: Color(0xFF68B762),
              ),
            ),
          ],
        ),

Upvotes: 0

Kumaresan Jackie
Kumaresan Jackie

Reputation: 111

try this,

return MaterialApp(
  home: Scaffold(
    body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Total\nKm',
            textAlign: TextAlign.right,
            style: TextStyle(color: Color(0xFF68B762)),
          ),
          SizedBox(
            width: 5,
          ),
          Text(
            '612',
            style: TextStyle(
                fontSize: 30,
                // fontFamily: SecondaryFontMedium,
                color: Color(0xFF68B762)),
          ),
        ],
      ),
    ),
  ),
);

Happy Coding!

Upvotes: 0

Ivo
Ivo

Reputation: 23277

If you want the Total and Km closer together you could try setting a height in the style. For example

Text('Total', style: TextStyle(height: 1, color: Color(0xFF68B762))),
Text('Km', style: TextStyle(height: 1, color: Color(0xFF68B762)),),

result:

enter image description here

Upvotes: 1

Daniel Roldán
Daniel Roldán

Reputation: 1556

I don't know if the error is the spacing, or that the letters on the left are not aligned, but I got something like this :

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 40, // change this
                color: Colors.white,
                child: FittedBox( // this is important
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: const [
                      Text(
                        'Total',
                        style: TextStyle(color: Color(0xFF68B762)),
                      ),
                      Text(
                        'Km',
                        style: TextStyle(color: Color(0xFF68B762)),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                height: 40, // change this
                color: Colors.white,
                child: const FittedBox( // this is important
                  child: Text(
                    '612',
                    style: TextStyle(
                      height: 1, // this is important
                      fontSize: 45,
                      color: Color(0xFF68B762),
                    ),
                  ),
                ),
              ),
            ],
          )

enter image description here

What I did was to add both Container with some equal size (40 for example), then using the Widget FittedBox makes that when you lower the height of the container, the letter adapts and you don't have problems...

Now in the second letter to remove the "padding" is added the height : 1 in the TextStyle, if you can read more of it would be good so you don't have problems but basically it makes it possible to align with the left letters.

Try to edit the height Container and you'll see

Upvotes: 0

DholaHardik
DholaHardik

Reputation: 502

Add \n between "Total" and "Km". Use like this way,

 Row(
      children: [
        Text('Total\nKm', textAlign: TextAlign.end, style: TextStyle(color: Color(0xFF68B762))),
        Text('612',
            style: TextStyle(
                fontSize: 30,
                fontFamily: SecondaryFontMedium,
                color: Color(0xFF68B762))),
      ],
    )

Result: result

Upvotes: 1

Related Questions