Flutter scrollable positioned list support rtl text direction

0 votes

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),
            ),
          ],
        ),
      ),
    );
  }
}

Mar 14, 2023 in Android by anonymous
• 780 points
1,081 views

1 answer to this question.

0 votes

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
      );
    }
  });
},


answered Mar 18, 2023 by vishalini

Related Questions In Android

0 votes
1 answer

Flutter - Wrap text on overflow, like insert ellipsis or fade

Container( padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0), ...READ MORE

answered Mar 1, 2023 in Android by vishalini
1,266 views
0 votes
1 answer

How to underline text in flutter

You can underline text in Flutter by ...READ MORE

answered Mar 10, 2023 in Android by vinayak
12,492 views
0 votes
0 answers

Making TextView scrollable on Android

The text I'm showing in a TextView ...READ MORE

Nov 23, 2022 in Android by Ashwini
• 5,430 points
457 views
0 votes
0 answers

Android logo as an emoji (symbol) to copy and paste in text form

To use it in text editors, I ...READ MORE

Nov 23, 2022 in Android by Ashwini
• 5,430 points
4,201 views
0 votes
1 answer

What is the future of flutter?

Hi@MD, Flutter is a rather new cross-platform framework ...READ MORE

answered Jul 17, 2020 in Others by akhtar
• 38,260 points
1,071 views
0 votes
1 answer

What is Flutter?

Hi@akhtar, Flutter is an app SDK for building ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,460 points
1,322 views
0 votes
1 answer

How to install Flutter in Windows system?

Hi@akhtar, You can follow the below-given steps to ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,460 points
1,727 views
0 votes
1 answer

Open Contact information in Contact List using Phone Number of Contact Android Studio

You must first obtain the contact's CONTACT ...READ MORE

answered Nov 7, 2022 in Android by Edureka
• 12,690 points
968 views
0 votes
1 answer

Android - Set text to TextView

After discovering the views, you set the ...READ MORE

answered Nov 10, 2022 in Android by Edureka
• 12,690 points
2,537 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP