Feature 284 - Added leading property for NavigationPane Widget

CHANGELOG.md

@@ -5,6 +5,7 @@ Date format: DD/MM/YYYY
 - Do not use duplicated `Scrollbar`s ([#279](https://github.com/bdlukaa/fluent_ui/pull/279/))
 - Allow custom height on `NavigationPane` header. ([#260](https://github.com/bdlukaa/fluent_ui/pull/260/))
 - Allow to define the minimal tab width ([#282](https://github.com/bdlukaa/fluent_ui/pull/282/))
+- Allow applying custom leading Widget to NavigationPane([#286](https://github.com/bdlukaa/fluent_ui/pull/287/))
 
 ## [3.10.2] - [09/04/2022]
 

example/lib/main.dart

@@ -8,12 +8,12 @@ import 'package:url_strategy/url_strategy.dart';
 import 'package:window_manager/window_manager.dart';
 
 import 'screens/colors.dart';
+import 'screens/commandbars.dart';
 import 'screens/flyouts.dart';
 import 'screens/forms.dart';
 import 'screens/icons.dart';
 import 'screens/inputs.dart';
 import 'screens/mobile.dart';
-import 'screens/commandbars.dart';
 import 'screens/others.dart';
 import 'screens/settings.dart';
 import 'screens/typography.dart';

example/lib/screens/forms.dart

@@ -1,8 +1,7 @@
 // ignore_for_file: avoid_print
 
-import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:email_validator/email_validator.dart';
+import 'package:fluent_ui/fluent_ui.dart';
 
 class Forms extends StatefulWidget {
   const Forms({Key? key}) : super(key: key);

example/lib/screens/settings.dart

@@ -1,8 +1,7 @@
 // ignore_for_file: constant_identifier_names
 
-import 'package:flutter/foundation.dart';
-
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter_acrylic/flutter_acrylic.dart';
 import 'package:provider/provider.dart';
 

example/lib/theme.dart

@@ -1,7 +1,7 @@
 import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/foundation.dart';
-import 'package:system_theme/system_theme.dart';
 import 'package:flutter_acrylic/flutter_acrylic.dart';
+import 'package:system_theme/system_theme.dart';
 
 enum NavigationIndicators { sticky, end }
 

example/pubspec.lock

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

lib/fluent_ui.dart

@@ -1,6 +1,5 @@
 library fluent_ui;
 
-export 'package:flutter/widgets.dart' hide TextBox;
 export 'package:flutter/material.dart'
     show
         Brightness,
@@ -28,43 +27,41 @@ export 'package:flutter/material.dart'
         TextSelectionTheme,
         TextSelectionThemeData,
         SelectableText;
+export 'package:flutter/widgets.dart' hide TextBox;
 export 'package:scroll_pos/scroll_pos.dart';
 
 export 'src/app.dart';
-export 'src/icons.dart';
-export 'src/localization.dart';
-export 'src/utils.dart';
-
-export 'src/navigation/route.dart';
-
-export 'src/controls/navigation/bottom_navigation.dart';
-export 'src/layout/page.dart';
-
+export 'src/controls/form/auto_suggest_box.dart';
+export 'src/controls/form/combo_box.dart';
+export 'src/controls/form/form_row.dart';
+export 'src/controls/form/pickers/date_picker.dart';
+export 'src/controls/form/pickers/time_picker.dart';
+export 'src/controls/form/selection_controls.dart';
+export 'src/controls/form/text_box.dart';
+export 'src/controls/form/text_form_box.dart';
 export 'src/controls/inputs/buttons/base.dart';
-export 'src/controls/inputs/buttons/theme.dart';
 export 'src/controls/inputs/buttons/button.dart';
-export 'src/controls/inputs/buttons/icon_button.dart';
 export 'src/controls/inputs/buttons/filled_button.dart';
+export 'src/controls/inputs/buttons/icon_button.dart';
 export 'src/controls/inputs/buttons/outlined_button.dart';
 export 'src/controls/inputs/buttons/text_button.dart';
-
+export 'src/controls/inputs/buttons/theme.dart';
 export 'src/controls/inputs/checkbox.dart';
 export 'src/controls/inputs/chip.dart';
 export 'src/controls/inputs/dropdown_button.dart';
 export 'src/controls/inputs/pill_button_bar.dart';
 export 'src/controls/inputs/radio_button.dart';
 export 'src/controls/inputs/rating.dart';
+export 'src/controls/inputs/slider.dart';
 export 'src/controls/inputs/split_button.dart';
 export 'src/controls/inputs/toggle_button.dart';
 export 'src/controls/inputs/toggle_switch.dart';
-export 'src/controls/inputs/slider.dart';
-
+export 'src/controls/navigation/bottom_navigation.dart';
 export 'src/controls/navigation/navigation_view/view.dart';
 export 'src/controls/navigation/tab_view.dart';
 export 'src/controls/navigation/tree_view.dart';
-
-export 'src/controls/surfaces/calendar/calendar_view.dart';
 export 'src/controls/surfaces/bottom_sheet.dart';
+export 'src/controls/surfaces/calendar/calendar_view.dart';
 export 'src/controls/surfaces/card.dart';
 export 'src/controls/surfaces/commandbar.dart';
 export 'src/controls/surfaces/dialog.dart';
@@ -75,30 +72,22 @@ export 'src/controls/surfaces/list_tile.dart';
 export 'src/controls/surfaces/progress_indicators.dart';
 export 'src/controls/surfaces/snackbar.dart';
 export 'src/controls/surfaces/tooltip.dart';
-
 export 'src/controls/utils/divider.dart';
 export 'src/controls/utils/hover_button.dart';
 export 'src/controls/utils/info_badge.dart';
 export 'src/controls/utils/scrollbar.dart';
-
-export 'src/controls/form/auto_suggest_box.dart';
-export 'src/controls/form/text_box.dart';
-export 'src/controls/form/combo_box.dart';
-export 'src/controls/form/pickers/date_picker.dart';
-export 'src/controls/form/pickers/time_picker.dart';
-export 'src/controls/form/text_form_box.dart';
-export 'src/controls/form/form_row.dart';
-export 'src/controls/form/selection_controls.dart';
-
+export 'src/icons.dart';
 export 'src/layout/dynamic_overflow.dart';
-
-export 'src/styles/motion/page_transitions.dart';
+export 'src/layout/page.dart';
+export 'src/localization.dart';
+export 'src/navigation/route.dart';
 export 'src/styles/acrylic.dart';
 export 'src/styles/color.dart' hide ColorConst;
+export 'src/styles/focus.dart';
 export 'src/styles/mica.dart';
+export 'src/styles/motion/page_transitions.dart';
 export 'src/styles/theme.dart';
 export 'src/styles/typography.dart';
-
-export 'src/styles/focus.dart';
+export 'src/utils.dart';
 export 'src/utils/horizontal_scroll_view.dart';
 export 'src/utils/label.dart';

lib/src/controls/form/auto_suggest_box.dart

@@ -1,6 +1,6 @@
 import 'dart:ui' as ui;
-import 'package:fluent_ui/fluent_ui.dart';
 
+import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/foundation.dart';
 
 enum TextChangedReason {

lib/src/controls/form/combo_box.dart

@@ -1,12 +1,11 @@
 import 'dart:math' as math;
 import 'dart:ui' show window;
 
+import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 
-import 'package:fluent_ui/fluent_ui.dart';
-
 import 'pickers/pickers.dart';
 
 const Duration _kComboboxMenuDuration = Duration(milliseconds: 300);

lib/src/controls/form/pickers/date_picker.dart

@@ -1,5 +1,4 @@
 import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:fluent_ui/src/utils/popup.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';

lib/src/controls/form/pickers/time_picker.dart

@@ -1,8 +1,7 @@
 import 'package:fluent_ui/fluent_ui.dart';
-import 'package:flutter/rendering.dart';
-import 'package:flutter/foundation.dart';
-
 import 'package:fluent_ui/src/utils/popup.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/rendering.dart';
 
 import 'pickers.dart';
 

lib/src/controls/form/text_form_box.dart

@@ -1,8 +1,8 @@
 import 'dart:ui' as ui;
 
+import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/services.dart';
-import 'package:fluent_ui/fluent_ui.dart';
 
 /// A [FormField] that contains a [TextBox].
 ///

lib/src/controls/inputs/buttons/base.dart

@@ -1,7 +1,6 @@
 // import 'package:flutter/material.dart' as m;
-import 'package:flutter/foundation.dart';
-
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter/foundation.dart';
 
 /// {@template fluent_ui.buttons.base}
 /// Buttons give people a way to trigger an action. They’re typically found in

lib/src/controls/inputs/buttons/theme.dart

@@ -1,8 +1,7 @@
 import 'dart:ui' show lerpDouble;
 
-import 'package:flutter/foundation.dart';
-
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter/foundation.dart';
 
 class ButtonStyle with Diagnosticable {
   const ButtonStyle({

lib/src/controls/inputs/checkbox.dart

@@ -1,8 +1,7 @@
+import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 
-import 'package:fluent_ui/fluent_ui.dart';
-
 /// A check box is used to select or deselect action items. It can
 /// be used for a single item or for a list of multiple items that
 /// a user can choose from. The control has three selection states:

lib/src/controls/inputs/chip.dart

@@ -1,7 +1,6 @@
 import 'dart:ui' show lerpDouble;
 
 import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:flutter/foundation.dart';
 
 const double _kChipSpacing = 6.0;

lib/src/controls/inputs/pill_button_bar.dart

@@ -1,6 +1,5 @@
-import 'package:flutter/foundation.dart';
-
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter/foundation.dart';
 
 const double _kMinHeight = 28.0;
 const double _kMaxHeight = 46.0;

lib/src/controls/inputs/radio_button.dart

@@ -1,5 +1,4 @@
 import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 

lib/src/controls/inputs/slider.dart

@@ -1,10 +1,9 @@
 import 'dart:math' as math;
 
 import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:flutter/foundation.dart';
-import 'package:flutter/rendering.dart';
 import 'package:flutter/material.dart' as m;
+import 'package:flutter/rendering.dart';
 
 /// A slider is a control that lets the user select from a
 /// range of values by moving a thumb control along a track.

lib/src/controls/inputs/split_button.dart

@@ -1,8 +1,7 @@
 import 'dart:ui' show lerpDouble;
 
-import 'package:flutter/foundation.dart';
-
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter/foundation.dart';
 
 /// A Split Button has two parts that can be invoked separately.
 /// One part behaves like a standard button and invokes an immediate action.

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

@@ -85,6 +85,7 @@ class NavigationPane with Diagnosticable {
     this.customPane,
     this.menuButton,
     this.scrollController,
+    this.leading,
     this.indicator = const StickyNavigationIndicator(),
   }) : assert(selected == null || selected >= 0);
 
@@ -168,6 +169,9 @@ class NavigationPane with Diagnosticable {
   /// display mode is toggled.
   final ScrollController? scrollController;
 
+  /// The leading Widget for the Pane
+  final Widget? leading;
+
   /// A function called when building the navigation indicator
   final Widget? indicator;
 
@@ -421,7 +425,14 @@ class _TopNavigationPane extends StatelessWidget {
       child: Row(key: pane.paneKey, children: [
         Expanded(
           child: Row(children: [
-            if (appBar != null) NavigationAppBar.buildLeading(context, appBar!),
+            if (pane.leading != null)
+              Padding(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 8.0,
+                  vertical: 6.0,
+                ),
+                child: pane.leading!,
+              ),
             if (pane.header != null)
               Padding(
                 padding: const EdgeInsets.symmetric(

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

@@ -1,16 +1,11 @@
 import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 
 part 'body.dart';
-
 part 'indicators.dart';
-
-part 'pane_items.dart';
-
 part 'pane.dart';
-
+part 'pane_items.dart';
 part 'style.dart';
 
 /// The default size used by the app top bar.

lib/src/controls/navigation/tab_view.dart

@@ -1,5 +1,4 @@
 import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';

lib/src/controls/surfaces/info_bar.dart

@@ -1,7 +1,6 @@
 import 'dart:ui';
 
 import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart' show Icons;
 

lib/src/controls/surfaces/tooltip.dart

@@ -2,11 +2,10 @@ import 'dart:async';
 import 'dart:math' as math;
 import 'dart:ui' show lerpDouble;
 
+import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';
-
-import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/services.dart';
 
 /// A tooltip is a short description that is linked to another

lib/src/controls/utils/hover_button.dart

@@ -1,5 +1,4 @@
 import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:flutter/rendering.dart';
 
 typedef ButtonStateWidgetBuilder = Widget Function(

lib/src/controls/utils/scrollbar.dart

@@ -1,7 +1,6 @@
 import 'dart:ui' show lerpDouble;
 
 import 'package:fluent_ui/fluent_ui.dart';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 

lib/src/styles/acrylic.dart

@@ -2,11 +2,10 @@ import 'dart:math' as math;
 import 'dart:ui' show ImageFilter;
 import 'dart:ui' as ui show Image;
 
+import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart' as m;
 
-import 'package:fluent_ui/fluent_ui.dart';
-
 const double kBlurAmount = 30.0;
 
 const double kDefaultAcrylicAlpha = 0.8;