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?

CodePudding user response：

Use the Column with Rows:

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

CodePudding user response：

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