New StickyIndicator

CHANGELOG.md

@@ -1,6 +1,6 @@
 Date format: DD/MM/YYYY
 
-## [3.9.2]
+## [3.10.0] - Indicators and Command Bar
 
 - Improves `icons.dart` formatting and its generation.
 - Fix: [#207](/~https://github.com/bdlukaa/fluent_ui/pull/207) FilledButton disabled foreground
@@ -15,6 +15,45 @@ Date format: DD/MM/YYYY
 - Add `HorizontalScrollView` helper widget, with mouse wheel horizontal scrolling
 - Long `content` widget no longer overflow in `ContentDialog` ([#242](/~https://github.com/bdlukaa/fluent_ui/issues/242))
 - Content no longer loses state when the pane display mode is changed ([#250](/~https://github.com/bdlukaa/fluent_ui/pull/250))
+- **BREAKING** Update indicators ([#248](/~https://github.com/bdlukaa/fluent_ui/pull/248)):
+  - Added `InheritedNavigationView`
+  - Updated sticky indicator to match the latest Win 11 UI ([#173](/~https://github.com/bdlukaa/fluent_ui/issues/173))
+  - **BREAKING** Renamed `NavigationPane.indicatorBuilder` to `NavigationPane.indicator`
+  - **BREAKING** Indicators are no longer built with functions
+    Before:
+    ```dart
+    indicatorBuilder: ({
+      required BuildContext context,
+      required NavigationPane pane,
+      required Axis axis,
+      required Widget child,
+    }) {
+      if (pane.selected == null) return child;
+      assert(debugCheckHasFluentTheme(context));
+      final theme = NavigationPaneTheme.of(context);
+
+      final left = theme.iconPadding?.left ?? theme.labelPadding?.left ?? 0;
+      final right = theme.labelPadding?.right ?? theme.iconPadding?.right ?? 0;
+
+      return StickyNavigationIndicator(
+        index: pane.selected!,
+        pane: pane,
+        child: child,
+        color: theme.highlightColor,
+        curve: Curves.easeIn,
+        axis: axis,
+        topPadding: EdgeInsets.only(left: left, right: right),
+      );
+    }
+    ```
+
+    Now:
+
+    ```dart
+    indicator: StickyNavigationIndicator(
+      color: Colors.blue.lighter, // optional
+    ),
+    ```
 - `initiallyExpanded` property on `Expander` works properly ([#252](/~https://github.com/bdlukaa/fluent_ui/pull/252))
 
 ## [3.9.1] - Input Update - [25/02/2022]

README.md

@@ -471,32 +471,7 @@ You can customize the selected indicator. By default `StickyNavigationIndicator`
 
 ```dart
 pane: NavigationPane(
-  indicatorBuilder: ({
-    required BuildContext context,
-    /// The navigation pane corresponding to this indicator
-    required NavigationPane pane,
-    /// Corresponds to the current display mode. If top, Axis.vertical
-    /// is passed, otherwise Axis.vertical
-    Axis? axis,
-    /// Corresponds to the pane itself as a widget. The indicator is
-    /// rendered over the whole pane.
-    required Widget child,
-  }) {
-    if (pane.selected == null) return child;
-    assert(debugCheckHasFluentTheme(context));
-    final theme = NavigationPaneThemeData.of(context);
-
-    axis??= Axis.horizontal;
-
-    return EndNavigationIndicator(
-      pane: pane,
-      index: pane.selected!,
-      child: child,
-      axis: axis,
-      color: theme.highlightColor,
-      curve: theme.animationCurve ?? Curves.linear,
-    );
-  },
+  indicator: const EndNavigationIndicator(),
 )
 ```
 

example/lib/main.dart

@@ -72,8 +72,7 @@ class MyApp extends StatelessWidget {
           title: appTitle,
           themeMode: appTheme.mode,
           debugShowCheckedModeBanner: false,
-          initialRoute: '/',
-          routes: {'/': (_) => const MyHomePage()},
+          home: const MyHomePage(),
           color: appTheme.color,
           darkTheme: ThemeData(
             brightness: Brightness.dark,
@@ -123,6 +122,7 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
   int index = 0;
 
   final settingsController = ScrollController();
+  final viewKey = GlobalKey();
 
   @override
   void initState() {
@@ -141,6 +141,7 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
   Widget build(BuildContext context) {
     final appTheme = context.watch<AppTheme>();
     return NavigationView(
+      key: viewKey,
       appBar: NavigationAppBar(
         title: () {
           if (kIsWeb) return const Text(appTitle);
@@ -176,13 +177,13 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
           ),
         ),
         displayMode: appTheme.displayMode,
-        indicatorBuilder: () {
+        indicator: () {
           switch (appTheme.indicator) {
             case NavigationIndicators.end:
-              return NavigationIndicator.end;
+              return const EndNavigationIndicator();
             case NavigationIndicators.sticky:
             default:
-              return NavigationIndicator.sticky;
+              return const StickyNavigationIndicator();
           }
         }(),
         items: [

example/pubspec.lock

@@ -91,7 +91,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "3.9.2"
+    version: "3.10.0"
   flutter:
     dependency: "direct main"
     description: flutter

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

@@ -116,7 +116,7 @@ class _NavigationBodyState extends State<NavigationBody> {
   @override
   Widget build(BuildContext context) {
     assert(debugCheckHasFluentTheme(context));
-    final _body = _NavigationBody.maybeOf(context);
+    final _body = InheritedNavigationView.maybeOf(context);
     final theme = FluentTheme.of(context);
     final NavigationPaneThemeData paneTheme = NavigationPaneTheme.of(context);
     return Container(
@@ -163,26 +163,79 @@ class _NavigationBodyState extends State<NavigationBody> {
   }
 }
 
-/// A widget that tells [NavigationBody] what's the panel display
-/// mode of the parent [NavigationView], if any.
-class _NavigationBody extends InheritedWidget {
-  const _NavigationBody({
+/// A widget that tells what's the the current state of the parent
+/// [NavigationView]
+///
+/// See also:
+///
+///  * [NavigationView], which provides the information for this
+///  * [NavigationBody], which is used to display the content
+class InheritedNavigationView extends InheritedWidget {
+  /// Creates an inherited navigation view.
+  const InheritedNavigationView({
     Key? key,
     required Widget child,
     required this.displayMode,
-    required this.minimalPaneOpen,
+    this.minimalPaneOpen = false,
+    this.pane,
+    this.oldIndex = 0,
+    this.itemIndex = -1,
   }) : super(key: key, child: child);
 
+  /// The current pane display mode.
   final PaneDisplayMode? displayMode;
+
+  /// Whether the minimal pane is open or not
   final bool minimalPaneOpen;
 
-  static _NavigationBody? maybeOf(BuildContext context) {
-    return context.dependOnInheritedWidgetOfExactType<_NavigationBody>();
+  /// The current navigation pane
+  final NavigationPane? pane;
+
+  /// The old index
+  final int oldIndex;
+
+  /// Used by [NavigationIndicator] to know what's the current index of the
+  /// item
+  final int itemIndex;
+
+  static InheritedNavigationView? maybeOf(BuildContext context) {
+    return context
+        .dependOnInheritedWidgetOfExactType<InheritedNavigationView>();
+  }
+
+  static InheritedNavigationView of(BuildContext context) {
+    return context
+        .dependOnInheritedWidgetOfExactType<InheritedNavigationView>()!;
+  }
+
+  static Widget merge({
+    Key? key,
+    required Widget child,
+    int? itemIndex,
+    NavigationPane? pane,
+    PaneDisplayMode? displayMode,
+    bool? minimalPaneOpen,
+    int? oldIndex,
+  }) {
+    return Builder(builder: (context) {
+      final current = InheritedNavigationView.maybeOf(context);
+      return InheritedNavigationView(
+        key: key,
+        child: child,
+        displayMode: displayMode ?? current?.displayMode,
+        minimalPaneOpen: minimalPaneOpen ?? current?.minimalPaneOpen ?? false,
+        itemIndex: itemIndex ?? current?.itemIndex ?? -1,
+        pane: pane ?? current?.pane,
+        oldIndex: oldIndex ?? current?.oldIndex ?? 0,
+      );
+    });
   }
 
   @override
-  bool updateShouldNotify(_NavigationBody oldWidget) {
+  bool updateShouldNotify(InheritedNavigationView oldWidget) {
     return oldWidget.displayMode != displayMode ||
-        oldWidget.minimalPaneOpen != minimalPaneOpen;
+        oldWidget.minimalPaneOpen != minimalPaneOpen ||
+        oldWidget.pane != pane ||
+        oldWidget.itemIndex != oldWidget.itemIndex;
   }
 }