support rtl

CHANGELOG.md

@@ -20,4 +20,7 @@
 
 ## [1.3.0] - Null safety
   - This library is now null-safety
-  - ! Breaking change: deprecated `iconPath` field has been removed, use `svgPath` instead
+  - ! Breaking change: deprecated `iconPath` field has been removed, use `svgPath` instead
+
+## [1.4.0] - Add RTL support
+  - This library is now support Right To Left

example/pubspec.lock

@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.5.0"
+    version: "2.8.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -21,14 +21,14 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.1"
   clock:
     dependency: transitive
     description:
@@ -63,7 +63,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.2.0"
+    version: "1.4.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -75,7 +75,7 @@ packages:
       name: flutter_svg
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.22.0"
+    version: "1.0.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -87,14 +87,14 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10"
+    version: "0.12.11"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.7.0"
   path:
     dependency: transitive
     description:
@@ -108,14 +108,14 @@ packages:
       name: path_drawing
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.5.1"
+    version: "1.0.0"
   path_parsing:
     dependency: transitive
     description:
       name: path_parsing
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.1"
+    version: "1.0.0"
   petitparser:
     dependency: transitive
     description:
@@ -134,7 +134,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0"
+    version: "1.8.1"
   stack_trace:
     dependency: transitive
     description:
@@ -169,7 +169,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.19"
+    version: "0.4.3"
   typed_data:
     dependency: transitive
     description:
@@ -183,7 +183,7 @@ packages:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
   xml:
     dependency: transitive
     description:
@@ -192,5 +192,5 @@ packages:
     source: hosted
     version: "5.1.0"
 sdks:
-  dart: ">=2.12.0 <3.0.0"
+  dart: ">=2.14.0 <3.0.0"
   flutter: ">=1.24.0-7.0"

lib/src/fluid_nav_bar.dart

@@ -7,7 +7,8 @@ import './fluid_nav_bar_item.dart';
 
 typedef void FluidNavBarChangeCallback(int selectedIndex);
 
-typedef Widget FluidNavBarItemBuilder(FluidNavBarIcon icon, FluidNavBarItem item);
+typedef Widget FluidNavBarItemBuilder(
+    FluidNavBarIcon icon, FluidNavBarItem item);
 
 /// A widget to display a fluid navigation bar with icon buttons.
 ///
@@ -55,42 +56,51 @@ class FluidNavBar extends StatefulWidget {
   /// Default Index is used for setting up selected item on start of the application.
   /// By default set to 0, meaning that item with index 0 will be selected.
   final int defaultIndex;
+  final int currentIndex;
 
   final FluidNavBarItemBuilder itemBuilder;
-
-  FluidNavBar(
-      {Key? key,
-      required this.icons,
-      this.onChange,
-      this.style,
-      this.animationFactor = 1.0,
-      this.scaleFactor = 1.2,
-      this.defaultIndex = 0,
-      FluidNavBarItemBuilder? itemBuilder})
-      : this.itemBuilder = itemBuilder ?? _identityBuilder,
+  final TextDirection? textDirection;
+
+  FluidNavBar({
+    Key? key,
+    required this.icons,
+    this.onChange,
+    this.style,
+    this.animationFactor = 1.0,
+    this.scaleFactor = 1.2,
+    this.defaultIndex = 0,
+    this.currentIndex = 0,
+    this.textDirection,
+    FluidNavBarItemBuilder? itemBuilder,
+  })  : this.itemBuilder = itemBuilder ?? _identityBuilder,
         assert(icons.length > 1),
         super(key: key);
 
   @override
   State createState() => _FluidNavBarState();
 
-  static Widget _identityBuilder(FluidNavBarIcon icon, FluidNavBarItem item) => item;
+  static Widget _identityBuilder(FluidNavBarIcon icon, FluidNavBarItem item) =>
+      item;
 }
 
-class _FluidNavBarState extends State<FluidNavBar> with TickerProviderStateMixin {
-  int _currentIndex = 0;
+class _FluidNavBarState extends State<FluidNavBar>
+    with TickerProviderStateMixin {
+  int get _currentIndex => widget.currentIndex;
 
   late final AnimationController _xController;
   late final AnimationController _yController;
 
+  TextDirection get _textDirection =>
+      widget.textDirection ?? Directionality.of(context);
+
   @override
   void initState() {
     super.initState();
 
-    _currentIndex = widget.defaultIndex;
-
-    _xController = AnimationController(vsync: this, animationBehavior: AnimationBehavior.preserve);
-    _yController = AnimationController(vsync: this, animationBehavior: AnimationBehavior.preserve);
+    _xController = AnimationController(
+        vsync: this, animationBehavior: AnimationBehavior.preserve);
+    _yController = AnimationController(
+        vsync: this, animationBehavior: AnimationBehavior.preserve);
 
     Listenable.merge([_xController, _yController]).addListener(() {
       setState(() {});
@@ -99,7 +109,8 @@ class _FluidNavBarState extends State<FluidNavBar> with TickerProviderStateMixin
 
   @override
   void didChangeDependencies() {
-    _xController.value = _indexToPosition(_currentIndex) / MediaQuery.of(context).size.width;
+    _xController.value =
+        _indexToPosition(_currentIndex) / MediaQuery.of(context).size.width;
     _yController.value = 1.0;
 
     super.didChangeDependencies();
@@ -130,11 +141,18 @@ class _FluidNavBarState extends State<FluidNavBar> with TickerProviderStateMixin
             child: _buildBackground(),
           ),
           Positioned(
-            left: (appSize.width - _getButtonContainerWidth()) / 2,
+            left: _textDirection == TextDirection.ltr
+                ? (appSize.width - _getButtonContainerWidth()) / 2
+                : null,
+            right: _textDirection == TextDirection.rtl
+                ? (appSize.width - _getButtonContainerWidth()) / 2
+                : null,
             top: 0,
             width: _getButtonContainerWidth(),
             height: height,
-            child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: _buildButtons()),
+            child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceAround,
+                children: _buildButtons()),
           ),
         ],
       ),
@@ -166,8 +184,12 @@ class _FluidNavBarState extends State<FluidNavBar> with TickerProviderStateMixin
               entry.value.icon,
               _currentIndex == entry.key,
               () => _handleTap(entry.key),
-              entry.value.selectedForegroundColor ?? widget.style?.iconSelectedForegroundColor ?? Colors.black,
-              entry.value.unselectedForegroundColor ?? widget.style?.iconUnselectedForegroundColor ?? Colors.grey,
+              entry.value.selectedForegroundColor ??
+                  widget.style?.iconSelectedForegroundColor ??
+                  Colors.black,
+              entry.value.unselectedForegroundColor ??
+                  widget.style?.iconUnselectedForegroundColor ??
+                  Colors.grey,
               entry.value.backgroundColor ??
                   widget.style?.iconBackgroundColor ??
                   widget.style?.barBackgroundColor ??
@@ -192,29 +214,39 @@ class _FluidNavBarState extends State<FluidNavBar> with TickerProviderStateMixin
     // Calculate button positions based off of their
     // index (works with `MainAxisAlignment.spaceAround`)
     var buttonCount = widget.icons.length;
+
+    if (_textDirection == TextDirection.rtl) {
+      index = buttonCount - 1 - index;
+    }
+
     final appWidth = MediaQuery.of(context).size.width;
     final buttonsWidth = _getButtonContainerWidth();
     final startX = (appWidth - buttonsWidth) / 2;
-    return startX + index.toDouble() * buttonsWidth / buttonCount + buttonsWidth / (buttonCount * 2.0);
+    return startX +
+        index.toDouble() * buttonsWidth / buttonCount +
+        buttonsWidth / (buttonCount * 2.0);
   }
 
   void _handleTap(int index) {
     if (_currentIndex == index || _xController.isAnimating) return;
 
-    setState(() {
-      _currentIndex = index;
-    });
+    // setState(() {
+    //   _currentIndex = index;
+    // });
 
     _yController.value = 1.0;
-    _xController.animateTo(_indexToPosition(index) / MediaQuery.of(context).size.width,
+    _xController.animateTo(
+        _indexToPosition(index) / MediaQuery.of(context).size.width,
         duration: Duration(milliseconds: 620) * widget.animationFactor);
     Future.delayed(
       Duration(milliseconds: 500) * widget.animationFactor,
       () {
-        _yController.animateTo(1.0, duration: Duration(milliseconds: 1200) * widget.animationFactor);
+        _yController.animateTo(1.0,
+            duration: Duration(milliseconds: 1200) * widget.animationFactor);
       },
     );
-    _yController.animateTo(0.0, duration: Duration(milliseconds: 300) * widget.animationFactor);
+    _yController.animateTo(0.0,
+        duration: Duration(milliseconds: 300) * widget.animationFactor);
 
     if (widget.onChange != null) {
       widget.onChange!(index);
@@ -241,8 +273,11 @@ class _BackgroundCurvePainter extends CustomPainter {
   final double _normalizedY;
   final Color _color;
 
-  _BackgroundCurvePainter(double x, double normalizedY, Color color)
-      : _x = x,
+  _BackgroundCurvePainter(
+    double x,
+    double normalizedY,
+    Color color,
+  )   : _x = x,
         _normalizedY = normalizedY,
         _color = color;
 
@@ -251,26 +286,32 @@ class _BackgroundCurvePainter extends CustomPainter {
     // Paint two cubic bezier curves using various linear interpolations based off of the `_normalizedY` value
     final norm = LinearPointCurve(0.5, 2.0).transform(_normalizedY) / 2;
 
-    final radius = Tween<double>(begin: _radiusTop, end: _radiusBottom).transform(norm);
+    final radius =
+        Tween<double>(begin: _radiusTop, end: _radiusBottom).transform(norm);
     // Point colinear to the top edge of the background pane
-    final anchorControlOffset =
-        Tween<double>(begin: radius * _horizontalControlTop, end: radius * _horizontalControlBottom)
-            .transform(LinearPointCurve(0.5, 0.75).transform(norm));
+    final anchorControlOffset = Tween<double>(
+            begin: radius * _horizontalControlTop,
+            end: radius * _horizontalControlBottom)
+        .transform(LinearPointCurve(0.5, 0.75).transform(norm));
     // Point that slides up and down depending on distance for the target x position
-    final dipControlOffset = Tween<double>(begin: radius * _pointControlTop, end: radius * _pointControlBottom)
+    final dipControlOffset = Tween<double>(
+            begin: radius * _pointControlTop, end: radius * _pointControlBottom)
         .transform(LinearPointCurve(0.5, 0.8).transform(norm));
-    final y = Tween<double>(begin: _topY, end: _bottomY).transform(LinearPointCurve(0.2, 0.7).transform(norm));
-    final dist =
-        Tween<double>(begin: _topDistance, end: _bottomDistance).transform(LinearPointCurve(0.5, 0.0).transform(norm));
+    final y = Tween<double>(begin: _topY, end: _bottomY)
+        .transform(LinearPointCurve(0.2, 0.7).transform(norm));
+    final dist = Tween<double>(begin: _topDistance, end: _bottomDistance)
+        .transform(LinearPointCurve(0.5, 0.0).transform(norm));
     final x0 = _x - dist / 2;
     final x1 = _x + dist / 2;
 
     final path = Path()
       ..moveTo(0, 0)
       ..lineTo(x0 - radius, 0)
-      ..cubicTo(x0 - radius + anchorControlOffset, 0, x0 - dipControlOffset, y, x0, y)
+      ..cubicTo(
+          x0 - radius + anchorControlOffset, 0, x0 - dipControlOffset, y, x0, y)
       ..lineTo(x1, y)
-      ..cubicTo(x1 + dipControlOffset, y, x1 + radius - anchorControlOffset, 0, x1 + radius, 0)
+      ..cubicTo(x1 + dipControlOffset, y, x1 + radius - anchorControlOffset, 0,
+          x1 + radius, 0)
       ..lineTo(size.width, 0)
       ..lineTo(size.width, size.height)
       ..lineTo(0, size.height);
@@ -282,6 +323,8 @@ class _BackgroundCurvePainter extends CustomPainter {
 
   @override
   bool shouldRepaint(_BackgroundCurvePainter oldPainter) {
-    return _x != oldPainter._x || _normalizedY != oldPainter._normalizedY || _color != oldPainter._color;
+    return _x != oldPainter._x ||
+        _normalizedY != oldPainter._normalizedY ||
+        _color != oldPainter._color;
   }
 }