Supporting RTL Direction

[yottaline]

How to make the navbar supports RTL direction?

[MohamadSuhiebAjaj]

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

[yottaline]

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

[donisaputradev]

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

[shahmir-ahmed]

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.