How to dynamically extend the CARD widget height size based on the text in the card?

2,348

You might want to use a ConstrainedBox. It allows you to set a minimum height, but can expand if needed :

Card(
  child: ConstrainedBox(
    constraints: BoxConstraints(
      minHeight: 100,
    ),
    child: Text("")
  )
)
Share:
2,348
sdv.development
Author by

sdv.development

Updated on December 20, 2022

Comments

  • sdv.development
    sdv.development over 1 year

    So if I put a lot of text in a widget card the text will exceed the card widget and I can t see anymore the rest of it.

    Only if I manually the size of each card it will show all the text.

    Is it possible to dynamically extend the CARD widget height size based on the text in the card?

    For example, no matter how much text I put there the height of the card it will extend in order to show all the text in it.

    The code:

        Widget _card(
          {Color primary = Colors.redAccent,
          String imgPath,
          String chipText1 = '',
          String chipText2 = '',
          Widget backWidget,
          Color chipColor = LightColor.orange,
          bool isPrimaryCard = false}) {
        return Container(          
            height: isPrimaryCard ? 500 : 500,
            width: isPrimaryCard ? width * .90 : width * .90,
            margin: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
            decoration: BoxDecoration(
                color: primary.withAlpha(200),
                borderRadius: BorderRadius.all(Radius.circular(20)),
                boxShadow: <BoxShadow>[
                  BoxShadow(
                      offset: Offset(0, 5),
                      blurRadius:
                          10, 
                      color: LightColor.lightpurple.withAlpha(20))
                ]),
            child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              child: Container(
                child: Stack(
                  children: <Widget>[
                    backWidget,
                    Positioned(                      
                        top: 20,
                        left: 10,
                        child: CircleAvatar(                         
                          backgroundColor: Colors.transparent,
                          backgroundImage: NetworkImage(imgPath),
                        )),
                    Positioned(                      
                      top: 30,
                      left: 20,
                      child: _cardInfo(chipText1, chipText2,
                          LightColor.titleTextColor, chipColor,
                          isPrimaryCard: isPrimaryCard),
                    )
                  ],
                ),
              ),
            ));
      }
    
  • sdv.development
    sdv.development about 4 years
    Thank you for your reply but I can t figure it out in my code. I just updated the Question with some code.
  • MickaelHrndz
    MickaelHrndz about 4 years
    Wrap the top Container with a ConstrainedBox, and remove its height parameter. I think that should do it.
  • sdv.development
    sdv.development about 4 years
    I did but the whole text will vanish and I have a blank card. If I remove minHeight nothing happens.