Flutter align Column of text with single text-CodePudding

I would like to make this in Flutter:

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:

CodePudding user response：

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:

CodePudding user response：

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),
                    ),
                  ),
                ),
              ),
            ],
          )

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

CodePudding user response：

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:

CodePudding user response：

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!