CODEWITHSUNDEEP
flutterdarttext
Phil D
Phil D

Reputation: 94

Text spacing with another length of text

Is there anyway to space the No and Expiry Date 's : align like the picture below rather than manually adding empty space in the text?

enter image description here

Upvotes: 0

Views: 133

Answers (2)

Mahmoud
Mahmoud

Reputation: 510

You can use Sizedbox to define specific size for Text widget .

Sample :

class CustomText extends StatelessWidget {
  const CustomText({Key? key}) : super(key: key);

  txtItem(title, width) => SizedBox(
        width: width,
        child: Text(
          title,
          textAlign: TextAlign.left,
        ),
      );

  @override
  Widget build(BuildContext context) {
    var textItemWidth = MediaQuery.of(context).size.width * .3;
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                txtItem("No", textItemWidth),
                const Text(":"),
                txtItem("Hi", textItemWidth),
              ],
            ),
            Row(
              children: [
                txtItem("ExpireDate", textItemWidth),
                const Text(":"),
                txtItem("Hi", textItemWidth),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 1

Ayren King
Ayren King

Reputation: 427

Use the Column with Rows:

Column(
children: [
    Rows(
        mainAxisAlignment: MainAxisAlignment.spaceBetween
        children: [
            Text(),
            Text(),
        ],
    ),
    Rows(
        mainAxisAlignment: MainAxisAlignment.spaceBetween
        children: [
            Text(),
            Text(),
        ],
    ),
  ],
),

Upvotes: 0

Related Questions