RenderFlex overflow error displayed while using the card type class inside a container - 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.