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 note work. this photo is the result.

CodePudding user response：

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.