How to backrgroundColor full in TextSpan on flutter?

Question

Widget richText() {
      return Positioned(
        top: h / 1.9,
        right: w / 4.9,
        child: Material(
          color: Colors.transparent,
          child: Container(
            padding: const EdgeInsets.only(left: 8, right: 0),
            margin: const EdgeInsets.all(0),
            color: Colors.transparent,
            width: wA / 1.365,
            height: hA / 2.3,
            child: RichText(
              softWrap: true,
              textScaleFactor: 1,
              textAlign: TextAlign.justify,
              textDirection: TextDirection.rtl,
              text: TextSpan(
                style: GoogleFonts.notoNaskhArabic(
                  fontWeight: FontWeight.bold,
                  wordSpacing: 0.05,
                  letterSpacing: 0.05,
                  height: 2.2,
                  fontSize: 24,
                  color: Colors.black,
                ),
                children: [
                  for (int u = 0; u < _items.length; u++)
                    (u) > 0
                        ? TextSpan(
                            style: TextStyle(
                                backgroundColor: (indexBackground) == u
                                    ? Colors.amber
                                    : Colors.transparent),
                            children: [
                              TextSpan(
                                style: TextStyle(
                                    backgroundColor: (indexBackground) == u
                                        ? Colors.amber
                                        : Colors.transparent),
                                text: _items[u]['text'],
                                recognizer: LongPressGestureRecognizer()
                                  ..onLongPress = () {
                                    indexBackground = u;
                                    setState(() {});
                                  },
                              ),
                              const WidgetSpan(
                                alignment: PlaceholderAlignment.middle,
                                child: SizedBox(width: 3),
                              ),
                              WidgetSpan(
                                alignment: PlaceholderAlignment.middle,
                                child: waqaf(u + 1),
                              ),
                              const WidgetSpan(
                                alignment: PlaceholderAlignment.middle,
                                child: SizedBox(
                                  width: 8,
                                ),
                              ),
                            ],
                          )
                        : const TextSpan(),
                ],
              ),
            ),
          ),
        ),
      );
    }

How to solve this?

I have set the outer border of the Container and padding to 0, but it doesn't work like the code below. I've also tried using widgetSpan to put text in, but the text just gets messy. Why not full colorBackground in TextSpan? Because, my code not worked. This photo is the result.

Answer 1

Adding an extra space will help text: "${_items[u]['text']} ",

TextSpan(
  text:"${_items[u]['text']} ",
  style: TextStyle(
      backgroundColor: (indexBackground) == u
          ? Colors.amber
          : Colors.transparent),
  recognizer: LongPressGestureRecognizer()

Seems like text doesn't have enough padding.

If you like more, use WidgetSpan with a container padding and bg color.