I am trying to set the max width of a card in flutter but it seems to keep expanding. I tried placing the Card in a constrainedBox and then tried setting the max width but the card keeps filling out the entire width of the screen which looks horrible on web:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 50, 10, 30),
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 600,
maxHeight: 300,
),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 10,
child: Image.asset(
'images/largeLogo.jpg',
height: 300,
),
),
),
),
I then thought the crossAxisAlignment: CrossAxisAlignment.stretch
might have been causing it. I remove that and changed it to center. This solved the stretching part, but then the image was larger then then card slightly so I saw square corners instead of the rounded corners on the card that I set. Also the image and card was no longer centered at this point and was left aligned.
CodePudding user response:
the Column have a property mainAxisSize
which by defaults is:
mainAxisSize: MainAxisSize.max,
set it to MainAxisSize.min
like this:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 50, 10, 30),
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 600,
maxHeight: 300,
),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 10,
child: Image.asset(
'images/largeLogo.jpg',
height: 300,
),
),
),
),