Issue
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
Solution
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: [
Answered By - Jack
Answer Checked By - Marie Seifert (JavaFixing Admin)