I have one centered Row
in Card
and two Column
there. How can I align elements by Y axis for icons in two columns (dashed line in screenshot)?
Here's a code:
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SvgPicture.asset(
"assets/weight_24dp.svg",
semanticsLabel: 'Thin',
width: 50,
height: 50,
),
Text(
'10',
style: Theme.of(context).textTheme.bodyLarge,
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Text('-'),
Icon(
Icons.repeat,
size: 50,
),
Text(
'12',
style: Theme.of(context).textTheme.bodyLarge,
),
Text('+')
],
),
],
),
),
Adding Text('+')
is breaking alignment...
I tried to use Align widget, but it didn't help me. Of course, I can add SizedBox to first widget and it will fix my problem, but I think this would be bad solution, and I try to find right and clean solution.
UPD:
Here's a full code of my Card
widget:
Card(
child: Container(
width: double.infinity,
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Title',
style: Theme.of(context).textTheme.titleMedium,
),
Padding(
padding: const EdgeInsets.only(top: 9.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Subtitle',
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SvgPicture.asset(
"assets/weight_24dp.svg",
semanticsLabel: 'Thin',
width: 50,
height: 50,
),
Text(
'10',
style: Theme.of(context).textTheme.bodyLarge,
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.repeat,
size: 50,
),
Text(
'12',
style: Theme.of(context).textTheme.bodyLarge,
),
Text('+')
],
),
],
),
],
),
),
),
I've removed Expanded
and then I got expected alignment behavior. But I need to center icons and text like on previous picture, and I don't know how to do this without Expanded
...
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
Example:
...Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: [...
UPD: Solution via stack, also force columns to min size:
Card(
child: Container(
width: double.infinity,
height: 500,
padding: const EdgeInsets.all(12.0),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Title',
style: Theme.of(context).textTheme.titleMedium,
),
Padding(
padding: const EdgeInsets.only(top: 9.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Subtitle',
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
),
],
),
Align(
alignment: Alignment.center,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: [
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.add,
size: 50,
),
Text(
'10',
style: Theme.of(context).textTheme.bodyLarge,
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.add,
size: 50,
),
Text(
'12',
style: Theme.of(context).textTheme.bodyLarge,
),
Text('+'),
],
),
],
),
),
],
),
),
)