I have to display a Card inside row. It is taking full space . When I have a column I set mainAxis It reduces the size
I want to achieve the same effect for All Plans Text field
Is there any attribute for doing the same if I only have a single TextView
My Code
GenericRow(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), // Padding around the row
spacing: 16.0, // Space between cards
useExpanded: true, // Ensures both cards expand fully
children: [
Card(
color: Colors.deepOrange,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.all(16.0), // Adds spacing inside the Card
child: Center(
child: Text(
"All Plans",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
),
),
Card(
color: Colors.green,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("Card 2", style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)),
SizedBox(height: 8),
Text("This is the second card", style: TextStyle(color: Colors.white)),
],
),
),
),
],
)
generic_row.dart
class GenericRow extends StatelessWidget {
final List<Widget> children;
final MainAxisAlignment mainAxisAlignment;
final CrossAxisAlignment crossAxisAlignment;
final double spacing;
final EdgeInsets padding; // Padding around the row
final bool useExpanded; // if set width will no effect on it
const GenericRow({
super.key,
required this.children,
this.mainAxisAlignment = MainAxisAlignment.center,
this.crossAxisAlignment = CrossAxisAlignment.center,
this.spacing = 0.0,
this.padding = EdgeInsets.zero,
this.useExpanded = true,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: padding,
child: Row(
mainAxisAlignment: mainAxisAlignment,
crossAxisAlignment: crossAxisAlignment,
children: [
//TODO convert below for loop to mapping function
for (int index = 0; index < children.length; index++) ...[
///Expanded(child: children[index]),
if (useExpanded) Expanded(child: children[index]) else children[index],
if (index < children.length - 1) SizedBox(width: spacing),
],
],
),
);
}
}
The first deepOrange Card Taking full height where as I don't want it to have full height.
Is there any field or attribute that work like mainAxisSize: MainAxisSize.min
or I have to use IntrinsicHeight
for it
I need to have a cleaner approach to do this that has less number of children and easily extendable.