Flutter scrollable positioned list support rtl text direction

Question

I use the scrollable positioned package in the following code to move between elements via the index, and it works fine in the case of LTR, but when converting to RTL, some problems occur and the transition is not correct!! I tried to find out the problem but couldn't.

How can this be solved?

The code:

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int currentIndex = 0;
  TextDirection textDirection = TextDirection.ltr;

  late final ItemScrollController itemScrollController;

  @override
  void initState() {
    itemScrollController = ItemScrollController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: textDirection,
      child: Scaffold(
        appBar: AppBar(title: const Text('Scrollable positioned list')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 100,
              child: ScrollablePositionedList.separated(
                itemCount: 10,
                scrollDirection: Axis.horizontal,
                itemScrollController: itemScrollController,
                padding: const EdgeInsets.symmetric(horizontal: 16),
                separatorBuilder: (context, index) => const SizedBox(width: 10),
                itemBuilder: (context, index) => Container(
                  width: 100,
                  height: 50,
                  alignment: AlignmentDirectional.center,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    border: currentIndex == index ? Border.all(color: Colors.black, width: 4) : null,
                  ),
                  child:
                      Text(index.toString(), style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w800)),
                ),
              ),
            ),
            const SizedBox(height: 40),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  if (textDirection == TextDirection.ltr) {
                    textDirection = TextDirection.rtl;
                  } else {
                    textDirection = TextDirection.ltr;
                  }
                });
              },
              child: Text(textDirection.toString()),
            )
          ],
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            FloatingActionButton(
              onPressed: () {
                setState(() {
                  if (currentIndex != 0) {
                    currentIndex--;
                    itemScrollController.scrollTo(index: currentIndex, duration: const Duration(microseconds: 500), alignment: 0.10);
                  }
                });
              },
              child: const Icon(Icons.arrow_back),
            ),
            FloatingActionButton(
              onPressed: () {
                setState(() {
                  if (currentIndex < 9) {
                    currentIndex++;
                    itemScrollController.scrollTo(index: currentIndex, duration: const Duration(microseconds: 500), alignment: 0.10);
                  }
                });
              },
              child: const Icon(Icons.arrow_forward),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

To support RTL text direction in the ScrollablePositionedList, you need to change the alignment parameter of itemScrollController.scrollTo to 1.0 instead of 0.10.

In RTL, the direction of scrolling is reversed, so the alignment of the item should be at the end of the list (i.e., 1.0) instead of the beginning (i.e., 0.0).

So, update the FloatingActionButton's onPressed methods to the following:

onPressed: () {
  setState(() {
    if (currentIndex != 0) {
      currentIndex--;
      itemScrollController.scrollTo(
        index: currentIndex,
        duration: const Duration(microseconds: 500),
        alignment: 1.0, // change alignment to 1.0
      );
    }
  });
},

onPressed: () {
  setState(() {
    if (currentIndex < 9) {
      currentIndex++;
      itemScrollController.scrollTo(
        index: currentIndex,
        duration: const Duration(microseconds: 500),
        alignment: 1.0, // change alignment to 1.0
      );
    }
  });
},