eat: Use a Decoration instead of Color in NavigationAppBar (Fixes

#1118)

CHANGELOG.md

@@ -4,6 +4,7 @@
 - feat: Add `TabView.reservedStripWidth`, which adds a minimum empty area between the tabs and the tab view footer ([#1106](https://github.com/bdlukaa/fluent_ui/issues/1106))]
 - fix: Correctly unfocus `NumberBox` when user taps outside ([#1135](https://github.com/bdlukaa/fluent_ui/issues/1135))
 - fix: Do try to scroll Date and Time at build time ([#1117](https://github.com/bdlukaa/fluent_ui/issues/1117))
+- feat: Use a `Decoration` instead of `Color` in `NavigationAppBar` ([#1118](https://github.com/bdlukaa/fluent_ui/issues/1118))
 
 ## 4.9.2
 

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

@@ -861,8 +861,15 @@ class NavigationAppBar with Diagnosticable {
   final double height;
 
   /// The background color of this app bar.
+  ///
+  /// If this is provided, [decoration] must be null.
   final Color? backgroundColor;
 
+  /// The decoration of this app bar.
+  ///
+  /// If this is provided, [backgroundColor] must be null.
+  final Decoration? decoration;
+
   /// Creates a fluent-styled app bar.
   const NavigationAppBar({
     this.key,
@@ -872,7 +879,13 @@ class NavigationAppBar with Diagnosticable {
     this.automaticallyImplyLeading = true,
     this.height = _kDefaultAppBarHeight,
     this.backgroundColor,
-  });
+    this.decoration,
+  }) : assert(
+          (backgroundColor == null && decoration == null) ||
+              (backgroundColor != null && decoration == null) ||
+              (backgroundColor == null && decoration != null),
+          'Only one of backgroundColor or decoration can be provided',
+        );
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -885,6 +898,7 @@ class NavigationAppBar with Diagnosticable {
         defaultValue: true,
       ))
       ..add(ColorProperty('backgroundColor', backgroundColor))
+      ..add(DiagnosticsProperty<Decoration>('decoration', decoration))
       ..add(DoubleProperty(
         'height',
         height,
@@ -1035,6 +1049,7 @@ class _NavigationAppBar extends StatelessWidget {
 
     return Container(
       color: appBar.backgroundColor,
+      decoration: appBar.decoration,
       height: appBar.finalHeight(context),
       padding: EdgeInsetsDirectional.only(top: topPadding),
       child: result,