Question 241007 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make two text widgets bottom aligned as shown in the picture in flutter?

How to make two text widgets bottom aligned as shown in the picture in flutter?
enter image description here

child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
  Row(
    children: [
      const Text(
        '$',
        style: TextStyle(fontSize: 12),
      ),
      Text(
        '${product.price}',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: const TextStyle(fontSize: 16),
      ),
    ],
  ),
Tags:

3

Answers


  1. 0 
    Row(
      crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Padding(
        padding: const EdgeInsets.only(bottom:1.5),
      child: const Text(
        '$',
        style: TextStyle(fontSize: 11),
      ),),
      Text(
        '30.99',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: const TextStyle(fontSize: 16),
      ),
    ],
  )
    Login or Signup to reply.
  2. 0

    You don’t need Two Row Widget. So remove the parent Row and use the child Row as a Parent. Then add crossAxisAlignment: CrossAxisAlignment.end. Code:

    Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Text(
          '$',
          style: TextStyle(fontSize: 12),
        ),
        Text(
          '30.99',
          style: TextStyle(fontSize: 16),
        ),
      ],
    ),

    Hope it helps!

    Login or Signup to reply.
  3. 0

    In Flutter, you can achieve this by using the RichText widget, which allows you to display different styles within a single text element. Here’s an example of how you can add text containing a dollar sign with different font sizes

    RichText(
      text: TextSpan(
        style: TextStyle(
          fontSize: 24.0,
          color: Colors.black,
        ),
        children: [
          TextSpan(
            text: '$', // Small dollar sign
            style: TextStyle(
              fontSize: 18.0,
            ),
          ),
          TextSpan(
            text: '100', // Larger amount
          ),
        ],
      ),
    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search