A "RenderFlex overflowed " wrap text flutter

Question

I all, I want to wrap text in textSpan in RichText,

What I'm looking for is a kind of card in a listview where each of that card has an image and on the bottom the linear gradient and on it name of a dish, and other info

this is my code:

class DishWidgetFul extends StatefulWidget {
  final DishModel dishModel;

  const DishWidgetFul({Key key, this.dishModel}) : super(key: key);
  @override
  _DishWidgetFulState createState() => _DishWidgetFulState();
}

class _DishWidgetFulState extends State<DishWidgetFul> {

  @override
  Widget build(BuildContext context)  {
    final userProvider = Provider.of<UserProvider>(context);

    return  Padding(
      padding: const EdgeInsets.only(top:2, left:2, right: 2, bottom: 4),
      child: GestureDetector(
        onTap: () {},
        child: Stack(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(0),
              child: ClipRRect(
                  borderRadius: BorderRadius.circular(20.0),
                  child: Stack(
                    children: <Widget>[
                      Positioned.fill(child: Align(
                        alignment: Alignment.center,
                        child: Container(
                            height: 120,
                            child: Loading()),
                      )),
                      Center(
                            child: FadeInImage.memoryNetwork(placeholder: kTransparentImage, image: widget.dishModel.image),
                          )
                    ],
                  )),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[

                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      width: 50,
                      decoration: BoxDecoration(
                        color: white,
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: Row(
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.all(2.0),
                            child: Icon(
                              Icons.star,
                              color: Colors.yellow[900],
                              size: 20,
                            ),
                          ),
                          Text(widget.dishModel.rating.toString()),
                        ],
                      ),
                    ),
                  ),
                  widget.dishModel.isLiked ? SmallButton(Icons.favorite,) : Container(),
                ],
              ),
            ),
            Positioned.fill(
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    height: 100,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(20),
                          bottomRight: Radius.circular(20),
                        ),
                        gradient: LinearGradient(
                          begin: Alignment.bottomCenter,
                          end: Alignment.topCenter,
                          colors: [
                            Colors.black.withOpacity(0.8),
                            Colors.black.withOpacity(0.7),
                            Colors.black.withOpacity(0.6),
                            Colors.black.withOpacity(0.4),
                            Colors.black.withOpacity(0.1),
                            Colors.black.withOpacity(0.05),
                            Colors.black.withOpacity(0.025),
                          ],
                        )),
                  ),
                )),
            /*Container(
              height: 30,
              child: Marquee(
                text: 'There once was a boy who told this story about a boy: "',
                scrollAxis: Axis.horizontal,
              ),
            ),*/
            Positioned.fill(
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[


                      Padding(
                        padding: const EdgeInsets.fromLTRB(12, 8, 8, 8),
                        child: RichText(
                          text: TextSpan(
                              children: [

                            TextSpan(
                                text: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\n",
                                style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold),
                            ),
                            TextSpan(
                                text: "Price:  ",
                                style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w300)),
                            TextSpan(
                                text: "€ ${widget.dishModel.price/100} \n",
                                style: TextStyle(fontSize: 16)),
                          ], style: TextStyle(color: white)),
                        ),
                      ),
                    ],
                  ),
                ))
          ],
        ),
      ),

    );
  }
}

and that is what I obtain

What I'm looking for are 2 different solution 1 (the best) obtain a moving text from right to left 2 new line when the text is large.

Someone can help me?

Answer 1

You could use Wrap widget. Wrap widget wrap its children if they are too big to fit in the space given by the parent Widget.

This is a sample code that demonstrates it.

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Wrap widget'),
      ),
      body: Container(
        color: Colors.red,
        width: 100,
        height: 100,
        child: Wrap(
          children: [
            Text('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'),
            Text(' bbbbb'),
            Text(' ccccc'),
          ],
        ),
      ),
    );
  }
}

Here Container is given fixed width and height and there is huge string inside Wrap which is inside that Container.

You can find Wrap widget details here

Output: