I do a stateless widget category_card which is going to use four times.

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class CategoryCard extends StatelessWidget {
  final String svgSrc;
  final String title;
  final VoidCallback press;
  const CategoryCard(
      {Key? key,
      required this.svgSrc,
      required this.title,
      required this.press})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(13),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(13),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.15),
                spreadRadius: 5,
                blurRadius: 7,
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: press,
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  children: [
                    const Spacer(),
                    SvgPicture.asset(
                      svgSrc,
                      height: 100,
                      width: 100,
                    ),
                    const Spacer(),
                    Text(
                      title,
                      style: Theme.of(context).textTheme.subtitle1!.copyWith(
                          fontWeight: FontWeight.w800,
                          fontSize: 15,
                          color: Colors.blueGrey[900]),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

My output is alright, but the text part for long text such as medical condition the word is not align with the shorter word such as allergy. What can I do so that no matter how long the text all will have same starting alignment? enter image description here

CodePudding user response：

you can use Column property for making all it's item at the same point

Column(
crossAxisAlignment: CrossAxisAlignment.start, // or you can change it depends your need  
children: [

CodePudding user response：

You can use the alignment property of text. For example this will align the text to the center

Text("text", textAlign: TextAlign.center,)

EDIT In that case use the spacer below the text

child: Column(
                  children: [
                    const Spacer(),
                    SvgPicture.asset(
                      svgSrc,
                      height: 100,
                      width: 100,
                    ),
                   SizedBox(height:10),
                    Text(
                      title,
                      style: Theme.of(context).textTheme.subtitle1!.copyWith(
                          fontWeight: FontWeight.w800,
                          fontSize: 15,
                          color: Colors.blueGrey[900]),
                    ),
 const Spacer(),
                  ],
                ),