Indicator hotfix

CHANGELOG.md

@@ -3,6 +3,7 @@ Date format: DD/MM/YYYY
 ## [3.x.x]
 
 - Fix overflow behavior for `TreeViewItem` ([#270](https://github.com/bdlukaa/fluent_ui/pull/270))
+- Do not animate sticky indicators when parent is updated ([#273](https://github.com/bdlukaa/fluent_ui/pull/273))
 
 ## [3.10.0] - Localization, Indicators, CommandBar and Flyouts - [02/04/2022]
 

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

@@ -239,3 +239,25 @@ class InheritedNavigationView extends InheritedWidget {
         oldWidget.itemIndex != oldWidget.itemIndex;
   }
 }
+
+/// Makes the [GlobalKey]s for [PaneItem]s accesible on the scope.
+class _PaneItemKeys extends InheritedWidget {
+  const _PaneItemKeys({
+    Key? key,
+    required Widget child,
+    required this.keys,
+  }) : super(key: key, child: child);
+
+  final Map<int, GlobalKey> keys;
+
+  static GlobalKey of(int index, BuildContext context) {
+    final reference =
+        context.dependOnInheritedWidgetOfExactType<_PaneItemKeys>()!;
+    return reference.keys[index]!;
+  }
+
+  @override
+  bool updateShouldNotify(_PaneItemKeys oldWidget) {
+    return keys != oldWidget.keys;
+  }
+}

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

@@ -44,13 +44,17 @@ enum PaneDisplayMode {
   /// ![Minimal Display Mode](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/displaymode-leftminimal.png)
   minimal,
 
-  /// Let the [NavigationPane] decide what display mode should be used
-  /// based on the width. This is used by default on [NavigationPanel].
-  /// In Auto mode, the [NavigationPane] adapts between [minimal] when
-  /// the window is narrow, to [compact], and then [open] as the window
-  /// gets wider.
+  /// Let the [NavigationPane] decide what display mode should be used based on
+  /// the width. This is used by default on [NavigationPane]. In Auto mode, the
+  /// [NavigationPane] adapts between [minimal] when the window is narrow, to
+  /// [compact], and then [open] as the window gets wider.
   ///
-  /// ![Automatic Display Mode](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/displaymode-auto.png)
+  /// - An expanded left pane on large window widths (1008px or greater).
+  /// - A left, icon-only, nav pane (LeftCompact) on medium window widths
+  /// (641px to 1007px).
+  /// - Only a menu button (LeftMinimal) on small window widths (640px or less).
+  ///
+  /// ![Automatic Display Mode](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/adaptive-behavior-minimal.png)
   auto,
 }
 

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

@@ -366,6 +366,12 @@ class PaneItem extends NavigationPaneItem {
       }
     }();
 
+    final GlobalKey? key = () {
+      if (index != null && !index.isNegative) {
+        return _PaneItemKeys.of(index, context);
+      }
+    }();
+
     return Padding(
       padding: const EdgeInsets.only(bottom: 4.0),
       child: () {
@@ -377,7 +383,7 @@ class PaneItem extends NavigationPaneItem {
               child: InheritedNavigationView.merge(
                 itemIndex: index,
                 child: KeyedSubtree(
-                  key: index != null ? ValueKey<int>(index) : null,
+                  key: index != null ? key : null,
                   child: maybeBody!.pane!.indicator!,
                 ),
               ),