How to wrap text and image on flutter?

Question

I want make this

Wrap(
   textDirection: TextDirection.rtl,
       children: [
          Text(
            _items[1]['text'],
            softWrap: true,
            textAlign: TextAlign.justify,
            textDirection: TextDirection.rtl,
            style: GoogleFonts.notoNaskhArabic(
                fontWeight: FontWeight.w900,
                fontSize: 25,
                backgroundColor: Colors.red),
          ),
          Text(
            _items[1]['text'],
            softWrap: true,
            textAlign: TextAlign.justify,
            textDirection: TextDirection.rtl,
            style: GoogleFonts.notoNaskhArabic(
                fontWeight: FontWeight.w900,
                fontSize: 25,
                backgroundColor: Colors.red
            ),
          ),
      ],
)

I wanted to wrap Text and image like photo, but the code turns out to be like this This wrong

Can you explain it briefly ? Is like you want text on top of image? — narayann, Aug 12 '22 at 15:16
https://stackoverflow.com/questions/51136826/how-to-to-display-text-over-the-images-in-flutter check this out — narayann, Aug 12 '22 at 15:26
No, I mean. I want like the photo above, open the text above the photo. — Rian Pratama, Aug 12 '22 at 15:45

score 2 · Accepted Answer · answered Aug 12 '22 at 15:31

2

Use RichText with WidgetSpan for non text.

 RichText(
  text: TextSpan(
    children: [
      TextSpan(text: "A"),
      WidgetSpan(
        alignment: PlaceholderAlignment.middle,
        child: Icon(Icons.av_timer),
      ),
      TextSpan(text: "B"),
    ],
  ),
  ),

More about RichText

answered Aug 12 '22 at 15:31

Md. Yeasin Sheikh

54,221
7
29
56

Glad to help, explore the link for more – Md. Yeasin Sheikh Aug 12 '22 at 15:54
may i ask 1 more? How to use the builder inside TextRich. so no need to write code one by one – Rian Pratama Aug 12 '22 at 16:09
You can create a list of string which you already have(i think), Now you can loop/map the list and add a widgetspan on the end. – Md. Yeasin Sheikh Aug 12 '22 at 17:00
1

I'm use for childreen inside children for loop, success. Thanks very much – Rian Pratama Aug 13 '22 at 01:58

How to wrap text and image on flutter?

1 Answers1