Navigation view updates

CHANGELOG.md

@@ -14,6 +14,8 @@ Date format: DD/MM/YYYY
 - Reviewed animation durations ([#421](https://github.com/bdlukaa/fluent_ui/issues/421))
   - **BREAKING** Removed `.animationDuration` and `.animationCurve` from `ScrollbarThemeData`
   - Added `expandContractAnimationDuration` and `contractDelay` to `ScrollbarThemeData`
+- `NavigationPaneSize` constraints are now correctly applied when in open mode ([#336](https://github.com/bdlukaa/fluent_ui/issues/336))
+- `NavigationIndicator` can't be invisble anymore when animation is stale ([#335](https://github.com/bdlukaa/fluent_ui/issues/335))
 
 ## [4.0.0-pre.1] - Materials and Pickers - [29/06/2022]
 

README.md

@@ -1731,21 +1731,25 @@ The list of equivalents between this library and `flutter/material.dart`
 
 FluentUI widgets currently supports out-of-the-box an wide number of languages, including:
 
-- Arabic
+- Arabic (@dmakwt)
 - English
-- Dutch
-- French
-- German
-- Hindi
-- Italian
-- Korean
-- Malay
-- Polish
-- Portuguese
-- Russian
-- Simplified Chinese
-- Traditional Chinese
-- Spanish
+- Dutch (@h3x4d3c1m4l)
+- French (@WinXaito)
+- German (@larsb24)
+- Hindi (@alexmercerind)
+- Italian (@patricknicolosi)
+- Japanese (@chari8)
+- Korean (@dubh3)
+- Malay (@jonsaw)
+- Persian (@xmine64)
+- Polish (@madik7)
+- Portuguese (@bdlukaa)
+- Russian (@raitonoberu)
+- Simplified Chinese (@zacksleo, @rk0cc)
+- Traditional Chinese (@zacksleo, @rk0cc)
+- Spanish (@henry2man)
+
+If a language is not supported, your app may crash. You can [add support for a new language](#contributing-new-localizations) or use a supported language. [Learn more](https://github.com/bdlukaa/fluent_ui/issues/371)
 
 ## Contribution
 

example/lib/main.dart

@@ -372,9 +372,8 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
           );
         }(),
         actions: Row(
-          // crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.end,
           children: [
-            const Spacer(),
             ToggleSwitch(
               content: const Text('Dark Mode'),
               checked: FluentTheme.of(context).brightness.isDark,
@@ -413,10 +412,6 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
           resetSearch();
           setState(() => index = i);
         },
-        size: const NavigationPaneSize(
-          openMinWidth: 250.0,
-          openMaxWidth: 320.0,
-        ),
         header: Container(
           height: kOneLineTileHeight,
           padding: const EdgeInsets.symmetric(horizontal: 10.0),

lib/src/controls/navigation/navigation_view/body.dart

@@ -134,8 +134,8 @@ class _NavigationBodyState extends State<NavigationBody> {
             return widget.transitionBuilder!(child, animation);
           }
           bool useDrillTransition = true;
-          if (body != null && body.displayMode != null) {
-            if (body.displayMode! == PaneDisplayMode.top) {
+          if (body != null) {
+            if (body.displayMode == PaneDisplayMode.top) {
               useDrillTransition = false;
             }
           }
@@ -182,7 +182,7 @@ class InheritedNavigationView extends InheritedWidget {
   }) : super(key: key, child: child);
 
   /// The current pane display mode according to the current state.
-  final PaneDisplayMode? displayMode;
+  final PaneDisplayMode displayMode;
 
   /// Whether the minimal pane is open or not
   final bool minimalPaneOpen;
@@ -215,12 +215,14 @@ class InheritedNavigationView extends InheritedWidget {
     PaneDisplayMode? displayMode,
     bool? minimalPaneOpen,
     int? oldIndex,
+    bool? currentItemSelected,
   }) {
     return Builder(builder: (context) {
       final current = InheritedNavigationView.maybeOf(context);
       return InheritedNavigationView(
         key: key,
-        displayMode: displayMode ?? current?.displayMode,
+        displayMode:
+            displayMode ?? current?.displayMode ?? PaneDisplayMode.open,
         minimalPaneOpen: minimalPaneOpen ?? current?.minimalPaneOpen ?? false,
         currentItemIndex: currentItemIndex ?? current?.currentItemIndex ?? -1,
         pane: pane ?? current?.pane,
@@ -236,7 +238,7 @@ class InheritedNavigationView extends InheritedWidget {
         oldWidget.minimalPaneOpen != minimalPaneOpen ||
         oldWidget.pane != pane ||
         oldWidget.oldIndex != oldIndex ||
-        oldWidget.currentItemIndex != oldWidget.currentItemIndex;
+        oldWidget.currentItemIndex != currentItemIndex;
   }
 }
 

lib/src/controls/navigation/navigation_view/indicators.dart

@@ -31,8 +31,11 @@ class NavigationIndicator extends StatefulWidget {
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties
-        .add(DiagnosticsProperty('curve', curve, defaultValue: Curves.linear));
+    properties.add(DiagnosticsProperty(
+      'curve',
+      curve,
+      defaultValue: Curves.linear,
+    ));
     properties.add(ColorProperty('highlight color', color));
   }
 
@@ -67,7 +70,7 @@ class NavigationIndicatorState<T extends NavigationIndicator> extends State<T> {
     return InheritedNavigationView.of(context).pane!;
   }
 
-  int get index {
+  int get selectedIndex {
     return pane.selected ?? -1;
   }
 
@@ -84,11 +87,11 @@ class NavigationIndicatorState<T extends NavigationIndicator> extends State<T> {
   }
 
   int get itemIndex {
-    return InheritedNavigationView.maybeOf(context)?.currentItemIndex ?? -1;
+    return InheritedNavigationView.of(context).currentItemIndex;
   }
 
   int get oldIndex {
-    return InheritedNavigationView.maybeOf(context)?.oldIndex ?? -1;
+    return InheritedNavigationView.of(context).oldIndex;
   }
 
   @override
@@ -115,7 +118,7 @@ class _EndNavigationIndicatorState
     extends NavigationIndicatorState<EndNavigationIndicator> {
   @override
   Widget build(BuildContext context) {
-    if (index.isNegative) return const SizedBox.shrink();
+    if (selectedIndex.isNegative) return const SizedBox.shrink();
     assert(debugCheckHasFluentTheme(context));
 
     final bool isTop = axis == Axis.vertical;
@@ -137,7 +140,7 @@ class _EndNavigationIndicatorState
             ),
             width: isTop ? 20.0 : 6.0,
             height: isTop ? 4.5 : double.infinity,
-            color: itemIndex != index
+            color: itemIndex != selectedIndex
                 ? widget.unselectedColor
                 : widget.color ?? theme.highlightColor,
           ),
@@ -188,16 +191,14 @@ class _StickyNavigationIndicatorState
       vsync: this,
       duration: widget.duration,
       value: 1.0,
-    )..addListener(_updateListener);
+    );
     downController = AnimationController(
       vsync: this,
       duration: widget.duration,
       value: 1.0,
-    )..addListener(_updateListener);
+    );
   }
 
-  void _updateListener() => setState(() {});
-
   Animation<double>? upAnimation;
   Animation<double>? downAnimation;
 
@@ -220,14 +221,13 @@ class _StickyNavigationIndicatorState
 
   bool get isShowing {
     if (itemIndex.isNegative) return false;
-    if (itemIndex == oldIndex && _old != oldIndex) {
-      return true;
-    }
-    return itemIndex == index;
+
+    if (itemIndex == selectedIndex) return true;
+    return itemIndex == oldIndex && _old != oldIndex;
   }
 
-  bool get isAbove => oldIndex < index;
-  bool get isBelow => oldIndex > index;
+  bool get isAbove => oldIndex < selectedIndex;
+  bool get isBelow => oldIndex > selectedIndex;
 
   @override
   void didChangeDependencies() {
@@ -240,7 +240,7 @@ class _StickyNavigationIndicatorState
       return;
     }
 
-    if (isShowing && _old != oldIndex) {
+    if (isShowing) {
       if (isBelow) {
         if (isSelected) {
           downAnimation = Tween<double>(begin: 0, end: 1.0).animate(
@@ -249,11 +249,13 @@ class _StickyNavigationIndicatorState
               parent: downController,
             ),
           );
+          upAnimation = null;
           await downController.forward(from: 0.0);
         } else {
           upAnimation = Tween<double>(begin: 0, end: 1.0).animate(
             CurvedAnimation(curve: widget.curve, parent: upController),
           );
+          downAnimation = null;
           await upController.reverse(from: 1.0);
         }
       } else if (isAbove) {
@@ -264,22 +266,25 @@ class _StickyNavigationIndicatorState
               parent: upController,
             ),
           );
+          downAnimation = null;
           await upController.forward(from: 0.0);
         } else {
           downAnimation = Tween<double>(begin: 0, end: 1.0).animate(
             CurvedAnimation(curve: widget.curve, parent: downController),
           );
+          upAnimation = null;
           await downController.reverse(from: 1.0);
         }
       }
     }
 
     _old = oldIndex;
+    if (mounted) setState(() {});
   }
 
   @override
   Widget build(BuildContext context) {
-    if (offsets == null || !isShowing || index.isNegative) {
+    if (offsets == null || !isShowing || selectedIndex.isNegative) {
       return const SizedBox.shrink();
     }
 
@@ -291,47 +296,49 @@ class _StickyNavigationIndicatorState
     final NavigationPaneThemeData theme = NavigationPaneTheme.of(context);
     final bool isHorizontal = axis == Axis.horizontal;
 
+    final decoration = BoxDecoration(
+      color: widget.color ?? theme.highlightColor,
+      borderRadius: BorderRadius.circular(100),
+    );
+
     return SizedBox(
       height: double.infinity,
       child: IgnorePointer(
-        child: Builder(builder: (context) {
-          final decoration = BoxDecoration(
-            color: widget.color ?? theme.highlightColor,
-            borderRadius: BorderRadius.circular(100),
-          );
-          final child = isHorizontal
+        child: AnimatedBuilder(
+          animation: Listenable.merge([upController, downController]),
+          child: isHorizontal
               ? Align(
                   alignment: AlignmentDirectional.centerStart,
                   child: Container(width: 2.5, decoration: decoration),
                 )
               : Align(
                   alignment: Alignment.bottomCenter,
                   child: Container(height: 2.5, decoration: decoration),
-                );
-          if (!isSelected) {
-            if (upController.status == AnimationStatus.dismissed ||
-                downController.status == AnimationStatus.dismissed) {
-              return const SizedBox.shrink();
-            }
-          } else {
-            if (upAnimation?.value == 0.0 || downAnimation?.value == 0.0) {
-              return const SizedBox.shrink();
+                ),
+          builder: (context, child) {
+            if (!isSelected) {
+              if (upController.status == AnimationStatus.dismissed ||
+                  downController.status == AnimationStatus.dismissed) {
+                return const SizedBox.shrink();
+              }
             }
-          }
-          return Padding(
-            padding: isHorizontal
-                ? EdgeInsets.only(
-                    left: offsets![itemIndex].dx,
-                    top: widget.leftPadding * (upAnimation?.value ?? 1.0),
-                    bottom: widget.leftPadding * (downAnimation?.value ?? 1.0),
-                  )
-                : EdgeInsetsDirectional.only(
-                    start: widget.topPadding * (upAnimation?.value ?? 1.0),
-                    end: widget.topPadding * (downAnimation?.value ?? 1.0),
-                  ),
-            child: child,
-          );
-        }),
+
+            return Padding(
+              padding: isHorizontal
+                  ? EdgeInsets.only(
+                      left: offsets![itemIndex].dx,
+                      top: widget.leftPadding * (upAnimation?.value ?? 1.0),
+                      bottom:
+                          widget.leftPadding * (downAnimation?.value ?? 1.0),
+                    )
+                  : EdgeInsetsDirectional.only(
+                      start: widget.topPadding * (upAnimation?.value ?? 1.0),
+                      end: widget.topPadding * (downAnimation?.value ?? 1.0),
+                    ),
+              child: child,
+            );
+          },
+        ),
       ),
     );
   }