RenderFlex overflow error displayed while using the card type class inside a container - Flutter - flutter

Question

I'm trying to display 2 cards inside a Container, but I'm getting the same RenderFlex error.
Can anyone help me out with this?
Here is the complete error:
════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 8.0 pixels on the bottom.
The relevant error-causing widget was: Column
lib\…\widgets\card_main.dart:60
Here is my code:
card_main.dart:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:pfe_app/screens/user_related/bilan_patient_screen.dart';
import 'package:pfe_app/screens/user_related/profile_screen.dart';
import '../constants.dart';
import 'custom_clipper.dart';
class CardMain extends StatelessWidget {
final ImageProvider image;
final String title;
final String value;
final String unit;
final Color color;
CardMain(
{Key? key,
required this.image,
required this.title,
required this.value,
required this.unit,
required this.color})
: super(key: key);
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topLeft,
child: Container(
margin: const EdgeInsets.only(right: 15.0),
width: ((MediaQuery.of(context).size.width -
(Constants.paddingSide * 2 + Constants.paddingSide / 2)) /
2),
decoration: new BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
shape: BoxShape.rectangle,
color: color,
),
child: Material(
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Stack(
overflow: Overflow.clip,
children: <Widget>[
Positioned(
child: ClipPath(
clipper: MyCustomClipper(clipType: ClipType.semiCircle),
child: Container(
decoration: new BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: Colors.black.withOpacity(0.03),
),
height: 120,
width: 120,
),
),
),
Padding(
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// Icon and Hearbeat
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image(width: 32, height: 32, image: image),
SizedBox(
width: 10,
),
Expanded(
child: Text(
title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 13, color: Constants.textDark),
),
),
],
),
SizedBox(height: 10),
Text(
value,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w900,
color: Constants.textDark,
),
),
Text(
unit,
style:
TextStyle(fontSize: 15, color: Constants.textDark),
),
],
),
)
],
),
onTap: () {
debugPrint("CARD main clicked. redirect to details page");
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ProfileScreen()),
);
},
),
color: Colors.transparent,
),
),
);
}
}
and here is the part in which i'm using that card class:
Container(
height: 140,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
CardMain(
image: AssetImage('assets/heartbeat.png'),
title: "Hearbeat",
value: "66",
unit: "bpm",
color: Constants.lightGreen,
),
CardMain(
image: AssetImage('assets/blooddrop.png'),
title: "Blood Pressure",
value: "66/123",
unit: "mmHg",
color: Constants.lightYellow)
],
),
),

Answer 1

Each Card could extend to over 70 pixels and you limit your Container to 140. Nothing I see in your CardMain limits its height to 70. So either increase that height or limit your CardMain. Based on my math of 40+32+10 plus two rows of Text, you should have overflowed more than 8, but maybe your text was empty. Even empty text will take height...use
unit == '' ? Container() : Text(unit)
to get rid of empty text spacing.