Supporting RTL Direction #2

Activity

1. MohamadSuhiebAjaj commented on Jul 8, 2024

   

   MohamadSuhiebAjaj

   on Jul 8, 2024

   More actions

   i also face the same issue please if you find problem fix tag me
2. yottaline commented on Jul 10, 2024

   

   yottaline

   on Jul 10, 2024

   Last edited by yottaline

   Author

   More actions

   i also face the same issue please if you find problem fix tag me

   @MohamadSuhiebAjaj

   Just wrap the nav with a Directionality widget to keep it ltr whatever your app ltr or rtl
   and reverse the items or keep it as it is
3. donisaputradev commented on Sep 25, 2024

   

   donisaputradev

   on Sep 25, 2024

   More actions

   I want to help, I found the fix like this for RTL support :

   from this :

     double getPosition(int i) {
       int itemCnt = widget.activeIcons.length;
       return i / itemCnt + (1 / itemCnt) / 2;
     }
   

   to this :

     double getPosition(int i) {
       int itemCnt = widget.activeIcons.length;
       double basePosition = i / itemCnt;
       if (Directionality.of(context) == TextDirection.rtl) {
         return ((1 - basePosition) - (1 / itemCnt) / 2);
       } else {
         return basePosition + (1 / itemCnt) / 2;
       }
     }
   

   👍React with 👍2Reacted by Jiwon Lee and Ahmed-Bassuoni
4. shahmir-ahmed commented on Jul 16, 2025

   

   shahmir-ahmed

   on Jul 16, 2025

   More actions

   I want to help, I found the fix like this for RTL support :

   from this :

     double getPosition(int i) {
       int itemCnt = widget.activeIcons.length;
       return i / itemCnt + (1 / itemCnt) / 2;
     }
   

   to this :

     double getPosition(int i) {
       int itemCnt = widget.activeIcons.length;
       double basePosition = i / itemCnt;
       if (Directionality.of(context) == TextDirection.rtl) {
         return ((1 - basePosition) - (1 / itemCnt) / 2);
       } else {
         return basePosition + (1 / itemCnt) / 2;
       }
     }
   

   Thanks @donisaputradev, your RTL fix works perfectly! Just wanted to expand a bit for others who might run into the same issue.

   Steps I followed:
   Copied the package locally into my project (e.g., under lib/local_packages/circle_nav_bar/lib/circle_nav_bar.dart). Also added this pubspec.yaml (under lib/local_packages/circle_nav_bar/pubspec.yaml):

   name: circle_nav_bar
   description: A custom navigation bar with RTL support.
   version: 1.0.0
   
   environment:
     sdk: ">=2.17.0 <4.0.0"
   
   dependencies:
     flutter:
       sdk: flutter
   

   In my project's pubspec.yaml, I pointed to the local path instead of current circle_nav_bar reference:

   circle_nav_bar:
     path: lib/local_packages/circle_nav_bar
   

   Updated the getPosition() method using @donisaputradev fix:

   double getPosition(int i) {
     int itemCnt = widget.activeIcons.length;
     double basePosition = i / itemCnt;
     if (Directionality.of(context) == TextDirection.rtl) {
       return ((1 - basePosition) - (1 / itemCnt) / 2);
     } else {
       return basePosition + (1 / itemCnt) / 2;
     }
   }
   

   Moved the tabAc.value = getPosition(...) logic from initState() into didChangeDependencies() to avoid the dependOnInheritedWidgetOfExactType error:

   @override
   void initState() {
     super.initState();
     tabAc = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: widget.tabDurationMillSec),
     )..addListener(() => setState(() {}));
   
     activeIconAc =
           AnimationController(
                   vsync: this,
                   duration: Duration(milliseconds: widget.iconDurationMillSec),
               )
               ..addListener(() => setState(() {}))
               ..value = 1;
   }
   
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
     tabAc.value = getPosition(widget.activeIndex);
   }
   

   Everything works smoothly now — RTL and all!
   Would be great if this could be merged or added as an option in the main package.