add a bottomAppBarColor to ThemeData (flutter#14859)

amirh · web-flow · commit ed84fb9652d0 · 2018-02-26T10:41:56.000-08:00
diff --git a/packages/flutter/lib/src/material/bottom_app_bar.dart b/packages/flutter/lib/src/material/bottom_app_bar.dart
@@ -6,9 +6,9 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
-import 'colors.dart';
 import 'material.dart';
 import 'scaffold.dart';
+import 'theme.dart';
 
 // Examples can assume:
 // Widget bottomAppBarContents;
@@ -61,6 +61,8 @@ class BottomAppBar extends StatefulWidget {
   final Widget child;
 
   /// The bottom app bar's background color.
+  ///
+  /// When null defaults to [ThemeData.bottomAppBarColor].
   final Color color;
 
   /// The z-coordinate at which to place this bottom app bar. This controls the
@@ -101,8 +103,7 @@ class _BottomAppBarState extends State<BottomAppBar> {
     return new PhysicalShape(
       clipper: clipper,
       elevation: widget.elevation,
-      // TODO(amirh): use a default color from the theme.
-      color: widget.color ?? Colors.white,
+      color: widget.color ?? Theme.of(context).bottomAppBarColor,
       child: new Material(
         type: MaterialType.transparency,
         child: widget.child,
diff --git a/packages/flutter/lib/src/material/theme_data.dart b/packages/flutter/lib/src/material/theme_data.dart
@@ -82,6 +82,7 @@ class ThemeData {
     Brightness accentColorBrightness,
     Color canvasColor,
     Color scaffoldBackgroundColor,
+    Color bottomAppBarColor,
     Color cardColor,
     Color dividerColor,
     Color highlightColor,
@@ -121,6 +122,7 @@ class ThemeData {
     final bool accentIsDark = accentColorBrightness == Brightness.dark;
     canvasColor ??= isDark ? Colors.grey[850] : Colors.grey[50];
     scaffoldBackgroundColor ??= canvasColor;
+    bottomAppBarColor ??= isDark ? Colors.grey[800] : Colors.white;
     cardColor ??= isDark ? Colors.grey[800] : Colors.white;
     dividerColor ??= isDark ? const Color(0x1FFFFFFF) : const Color(0x1F000000);
     highlightColor ??= isDark ? _kDarkThemeHighlightColor : _kLightThemeHighlightColor;
@@ -162,6 +164,7 @@ class ThemeData {
       accentColorBrightness: accentColorBrightness,
       canvasColor: canvasColor,
       scaffoldBackgroundColor: scaffoldBackgroundColor,
+      bottomAppBarColor: bottomAppBarColor,
       cardColor: cardColor,
       dividerColor: dividerColor,
       highlightColor: highlightColor,
@@ -205,6 +208,7 @@ class ThemeData {
     @required this.accentColorBrightness,
     @required this.canvasColor,
     @required this.scaffoldBackgroundColor,
+    @required this.bottomAppBarColor,
     @required this.cardColor,
     @required this.dividerColor,
     @required this.highlightColor,
@@ -238,6 +242,7 @@ class ThemeData {
        assert(accentColorBrightness != null),
        assert(canvasColor != null),
        assert(scaffoldBackgroundColor != null),
+       assert(bottomAppBarColor != null),
        assert(cardColor != null),
        assert(dividerColor != null),
        assert(highlightColor != null),
@@ -321,6 +326,11 @@ class ThemeData {
   /// background color for a typical material app or a page within the app.
   final Color scaffoldBackgroundColor;
 
+  /// The default color of the [BottomAppBar].
+  ///
+  /// This can be overriden by specifying [BottomAppBar.color].
+  final Color bottomAppBarColor;
+
   /// The color of [Material] when it is used as a [Card].
   final Color cardColor;
 
@@ -432,6 +442,7 @@ class ThemeData {
     Brightness accentColorBrightness,
     Color canvasColor,
     Color scaffoldBackgroundColor,
+    Color bottomAppBarColor,
     Color cardColor,
     Color dividerColor,
     Color highlightColor,
@@ -467,6 +478,7 @@ class ThemeData {
       accentColorBrightness: accentColorBrightness ?? this.accentColorBrightness,
       canvasColor: canvasColor ?? this.canvasColor,
       scaffoldBackgroundColor: scaffoldBackgroundColor ?? this.scaffoldBackgroundColor,
+      bottomAppBarColor: bottomAppBarColor ?? this.bottomAppBarColor,
       cardColor: cardColor ?? this.cardColor,
       dividerColor: dividerColor ?? this.dividerColor,
       highlightColor: highlightColor ?? this.highlightColor,
@@ -585,6 +597,7 @@ class ThemeData {
       primaryColorBrightness: t < 0.5 ? a.primaryColorBrightness : b.primaryColorBrightness,
       canvasColor: Color.lerp(a.canvasColor, b.canvasColor, t),
       scaffoldBackgroundColor: Color.lerp(a.scaffoldBackgroundColor, b.scaffoldBackgroundColor, t),
+      bottomAppBarColor: Color.lerp(a.bottomAppBarColor, b.bottomAppBarColor, t),
       cardColor: Color.lerp(a.cardColor, b.cardColor, t),
       dividerColor: Color.lerp(a.dividerColor, b.dividerColor, t),
       highlightColor: Color.lerp(a.highlightColor, b.highlightColor, t),
@@ -626,6 +639,7 @@ class ThemeData {
            (otherData.primaryColorBrightness == primaryColorBrightness) &&
            (otherData.canvasColor == canvasColor) &&
            (otherData.scaffoldBackgroundColor == scaffoldBackgroundColor) &&
+           (otherData.bottomAppBarColor == bottomAppBarColor) &&
            (otherData.cardColor == cardColor) &&
            (otherData.dividerColor == dividerColor) &&
            (otherData.highlightColor == highlightColor) &&
@@ -664,6 +678,7 @@ class ThemeData {
       primaryColorBrightness,
       canvasColor,
       scaffoldBackgroundColor,
+      bottomAppBarColor,
       cardColor,
       dividerColor,
       highlightColor,
@@ -677,8 +692,8 @@ class ThemeData {
       secondaryHeaderColor,
       textSelectionColor,
       textSelectionHandleColor,
-      backgroundColor,
       hashValues( // Too many values.
+        backgroundColor,
         accentColor,
         accentColorBrightness,
         indicatorColor,
diff --git a/packages/flutter/test/material/bottom_app_bar_test.dart b/packages/flutter/test/material/bottom_app_bar_test.dart
@@ -34,6 +34,58 @@ void main() {
     );
   });
 
+  testWidgets('color defaults to Theme.bottomAppBarColor', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      new MaterialApp(
+        home: new Builder(
+          builder: (BuildContext context) {
+            return new Theme(
+              data: Theme.of(context).copyWith(bottomAppBarColor: const Color(0xffffff00)),
+              child: const Scaffold(
+                floatingActionButton: const FloatingActionButton(
+                  onPressed: null,
+                ),
+                bottomNavigationBar: const BottomAppBar(),
+              ),
+            );
+          }
+        ),
+      ),
+    );
+
+    final PhysicalShape physicalShape =
+      tester.widget(find.byType(PhysicalShape).at(0));
+
+    expect(physicalShape.color, const Color(0xffffff00));
+  });
+
+  testWidgets('color overrides theme color', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      new MaterialApp(
+        home: new Builder(
+          builder: (BuildContext context) {
+            return new Theme(
+              data: Theme.of(context).copyWith(bottomAppBarColor: const Color(0xffffff00)),
+              child: const Scaffold(
+                floatingActionButton: const FloatingActionButton(
+                  onPressed: null,
+                ),
+                bottomNavigationBar: const BottomAppBar(
+                  color: const Color(0xff0000ff)
+                ),
+              ),
+            );
+          }
+        ),
+      ),
+    );
+
+    final PhysicalShape physicalShape =
+      tester.widget(find.byType(PhysicalShape).at(0));
+
+    expect(physicalShape.color, const Color(0xff0000ff));
+  });
+
   // TODO(amirh): test a BottomAppBar with hasNotch=false and an overlapping
   // FAB.
   //
