From ed84fb9652d04e1afab09a38c2b8d89afc4bbef9 Mon Sep 17 00:00:00 2001 From: amirh Date: Mon, 26 Feb 2018 10:41:56 -0800 Subject: [PATCH] add a bottomAppBarColor to ThemeData (#14859) --- .../lib/src/material/bottom_app_bar.dart | 7 +-- .../flutter/lib/src/material/theme_data.dart | 17 +++++- .../test/material/bottom_app_bar_test.dart | 52 +++++++++++++++++++ 3 files changed, 72 insertions(+), 4 deletions(-) diff --git a/packages/flutter/lib/src/material/bottom_app_bar.dart b/packages/flutter/lib/src/material/bottom_app_bar.dart index 3c1898e878..2bb569206b 100644 --- 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 { 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 index 8ef4910172..0949c51975 100644 --- 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 index 0ffa265707..9ebb5da0ae 100644 --- 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. //