can't wrap my long text inside a card in flutter

user_10401992 0
Viewed 1002

I'm trying to put a text inside a card and make the card a bit flexible whenever there is a long text it goes to the next line automatically and the card gets langer 

Widget ServiceCard (BuildContext context,double price){
  return Container(
    height: 100,
    margin: EdgeInsets.only(top: 12,right: 8,left: 8),
    width: MediaQuery.of(context).size.width,
    child: Card(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16)
      ),
      color: Colors.white,
      elevation: 8,
      child: Stack(
        children: <Widget>[
          Positioned(
            top: 8,
            left: 8,
            child: Text("\$$price"),
          ),
          Positioned(
            right: 8,
            top: 8,
            child: Container(
//              height: 70,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Container(
                      alignment: Alignment.topRight,
                      child: Text("غسيل شعر",style: TextStyle(fontSize: 16),)
                  ),
                  Opacity(
                      opacity:0.7,
                      child: Text(
                          "يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل"

                      )
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    ),
  );
}

with this code im having the text goes over the card and not going to the next line and even the card is in a constent heghit not wrapped

flutter-layout dart flutter
1 Answers

To make Text wrap on overflow, ideally it has to be sized to full width and maxLines property must be set to null.

However, I can see that you have encountered an "edge-case" - all your text is placed in a Stack widget, which does not fit its children in width by default.

To solve this, change your Positioned(...) widget to Positioned.fill.

e.g.

Positioned.fill(
  right: 8,
  top: 8,
  child: Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch, // You might want to use this, too - this stretches all children in width by default
      children: <Widget>[
        Container(
          alignment: Alignment.topRight,
          child: Text("غسيل شعر", style: TextStyle(fontSize: 16))
        ),
        Opacity(
          opacity: 0.7,
          child: Text(
            "يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل",
            textDirection: TextDirection.rtl, // I assume this would be helpful too, if your language reads from right to left.
          )
        ),
      ],
    ),
  ),
)

Let me know if this helped.

user_63745270
Related