How to make Selectable Region Widget from Right to Left Direction

Question

I am using a selection area with a selectable region and need to make the direction of selection from right to left (I tried all the RTL solutions for example wrapping with directionality). but I am not using text, I am using containers here are snippets of my code here is the demo : video

return SelectionArea(

        child: Stack(
          // clipBehavior: Clip.antiAlias,
          // textDirection: TextDirection.rtl,
          // alignment: Alignment.topRight,
          children: [
            ...state.wordsInPage.map((e) {
              double widthScaleFactor = 794.r / width;
              double heightScaleFactor = 1123.r / hight;
              double scaledLeft = e.bbox.x1 * widthScaleFactor;
              double scaledTop = e.bbox.y1 * heightScaleFactor;
              // double scaledRight = e.words.last.bbox.x2 * widthScaleFactor;
              final double lineHeight =
                  convertToLogicalPixels(context, (e.bbox.y2 - e.bbox.y1));

              return Positioned(
                height: 20.h,
                top: scaledTop,
                left: scaledLeft,
                width: (e.bbox.x2.toDouble() - e.bbox.x1.toDouble()) /
                    (width / (794.r)),
                child: Align(
                  alignment: Alignment.centerRight,
                  child: MySelectableAdapter(
                    id: ",${e.id}",
                    child: Container(
                      color: e.isSelected
                          ? Colors.amber.withOpacity(0.5)
                          : Colors.transparent,
                    ),
                  ),
                ),
              );
            }),

          ],
        ),
      );
    },
  
);

Answer 1

1. Leverage TextDirection and TextAlign: Utilize TextDirection.rtl in the Stack widget to set the overall direction for children:

Dart

Stack(
  textDirection: TextDirection.rtl,
  // ... other properties

Within each Positioned widget, apply TextAlign.right to the MySelectableAdapter child:

Dart

Positioned(
  // ... other properties
  child: Align(
    alignment: Alignment.centerRight,
    child: MySelectableAdapter(
      // ... other properties
      child: Container(
        // ... other properties
        alignment: TextAlign.right, // Set text alignment here
      ),
    ),
  ),
);

2. Adjust scaledLeft Calculation:

Since the selection direction is right-to-left, the starting point (scaledLeft) needs to be calculated based on the rightmost x-coordinate:

Dart

double scaledLeft = width - (e.bbox.x2 * widthScaleFactor);

This approach adjusts the stacking order and text alignment within each Positioned widget. The TextDirection.rtl sets the overall direction, and TextAlign.right ensures text and other content align to the right within the container. Finally, adjusting scaledLeft ensures the selection starts from the right based on the rightmost x-coordinate.