i've a card like this. Actual card
but i want a card like this What i want
My code is:
return Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Container(
padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Example text'),
Text("20-06-2021 - 13:00",
style:
TextStyle(fontSize: 15, fontStyle: FontStyle.italic)),
Text("Example text"),
Text("Example text"),
],
),
Column(
children: <Widget>[
Flag(
'FR',
height: 40,
width: 40,
replacement: Text('Error'),
),
],
),
],
),
),
);
Now, i have fixed height and width, i'm not able to obtain what i want because each attempt enlarge the card in height.
(I want to keep the same height as the card above).
The icons comes from the package flags (Flags package)
Instead of wrapping a Container
in a Card
. Try to Wrap a Row
with Expanded
in the Card
. (I just changed the Container into padding)
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Padding(
padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Example text'),
Text("20-06-2021 - 13:00",
style: TextStyle(
fontSize: 15, fontStyle: FontStyle.italic)),
Text("Example text"),
Text("Example text"),
],
),
),
Expanded(
flex: 1,
child: Container(
height: 100,
color: Colors.red,
),
)
],
),
),
),