firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Material] Add TabBarTheme (#22012)

Browse Source 
* Add tab bar theme.

* Add tab bar theme.

* Add tests, pass context to getters.

* update goldens from linux box

* update goldens from linux box

* Added new golden test, addressed comments

* override hashCode and == in TabBarTheme

* Fix comment typos

* Addressed Hans' comments.

* Formatting changes

* [TabBarTheme] Fixed spacing

* [TabBarTheme] Update goldens version to latest commit
This commit is contained in:
MH Johnson 2018-09-25 17:45:40 -04:00 committed by GitHub
parent 6c00bf98ee
commit f37c235c32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 259 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bin/internal/goldens.version
View File

@ -1 +1 @@
a7f6061b8171f6fc82b6f437d13079ee26189438
b84f87078729d0af8380fd9826091d8bafe6fcc7

1
packages/flutter/lib/material.dart
View File

@ -88,6 +88,7 @@ export 'src/material/snack_bar.dart';
export 'src/material/stepper.dart';
export 'src/material/switch.dart';
export 'src/material/switch_list_tile.dart';
export 'src/material/tab_bar_theme.dart';
export 'src/material/tab_controller.dart';
export 'src/material/tab_indicator.dart';
export 'src/material/tabs.dart';

94
packages/flutter/lib/src/material/tab_bar_theme.dart Normal file
View File

@ -0,0 +1,94 @@
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/foundation.dart';
import 'package:flutter/rendering.dart';
import 'tabs.dart';
/// Defines a theme for [TabBar] widgets.
///
/// A tab bar theme describes the color of the tab label and the size/shape of
/// the [TabBar.indicator].
///
/// Descendant widgets obtain the current theme's [TabBarTheme] object using
/// `Theme.of(context).tabBarTheme`.
/// [ThemeData.tabBarTheme] can be customized by copying it (using
/// [TabBarTheme.copyWith]).
///
/// See also:
///
/// * [TabBar], a widget that displays a horizontal row of tabs.
/// * [ThemeData], which describes the overall theme information for the
/// application.
class TabBarTheme extends Diagnosticable {
/// Creates a tab bar theme that can be used with [ThemeData.tabBarTheme].
const TabBarTheme({
this.indicator,
this.indicatorSize,
this.labelColor,
this.unselectedLabelColor,
});
/// Default value for [TabBar.indicator].
final Decoration indicator;
/// Default value for [TabBar.indicatorSize].
final TabBarIndicatorSize indicatorSize;
/// Default value for [TabBar.labelColor].
final Color labelColor;
/// Default value for [TabBar.unselectedLabelColor].
final Color unselectedLabelColor;
/// Creates a copy of this object but with the given fields replaced with the
/// new values.
TabBarTheme copyWith({
Decoration indicator,
TabBarIndicatorSize indicatorSize,
Color labelColor,
Color unselectedLabelColor,
}) {
return TabBarTheme(
indicator: indicator ?? this.indicator,
indicatorSize: indicatorSize ?? this.indicatorSize,
labelColor: labelColor ?? this.labelColor,
unselectedLabelColor: unselectedLabelColor ?? this.unselectedLabelColor
);
}
/// Linearly interpolate between two tab bar themes.
///
/// {@macro flutter.material.themeData.lerp}
static TabBarTheme lerp(TabBarTheme a, TabBarTheme b, double t) {
assert(a != null);
assert(b != null);
assert(t != null);
return TabBarTheme(
indicator: Decoration.lerp(a.indicator, b.indicator, t),
indicatorSize: t < 0.5 ? a.indicatorSize : b.indicatorSize,
labelColor: Color.lerp(a.labelColor, b.labelColor, t),
unselectedLabelColor: Color.lerp(a.unselectedLabelColor, b.unselectedLabelColor, t)
);
}
@override
int get hashCode {
return hashValues(indicator, indicatorSize, labelColor, unselectedLabelColor);
}
@override
bool operator ==(dynamic other) {
if (identical(this, other))
return true;
if (other.runtimeType != runtimeType)
return false;
final TabBarTheme typedOther = other;
return typedOther.indicator == indicator
&& typedOther.indicatorSize == indicatorSize
&& typedOther.labelColor == labelColor
&& typedOther.unselectedLabelColor == unselectedLabelColor;
}
}

22
packages/flutter/lib/src/material/tabs.dart
View File

@ -15,6 +15,7 @@ import 'debug.dart';
import 'ink_well.dart';
import 'material.dart';
import 'material_localizations.dart';
import 'tab_bar_theme.dart';
import 'tab_controller.dart';
import 'tab_indicator.dart';
import 'theme.dart';
@ -149,14 +150,22 @@ class _TabStyle extends AnimatedWidget {
@override
Widget build(BuildContext context) {
final ThemeData themeData = Theme.of(context);
final TabBarTheme tabBarTheme = themeData.tabBarTheme;
final TextStyle defaultStyle = labelStyle ?? themeData.primaryTextTheme.body2;
final TextStyle defaultUnselectedStyle = unselectedLabelStyle ?? labelStyle ?? themeData.primaryTextTheme.body2;
final Animation<double> animation = listenable;
final TextStyle textStyle = selected
? TextStyle.lerp(defaultStyle, defaultUnselectedStyle, animation.value)
: TextStyle.lerp(defaultUnselectedStyle, defaultStyle, animation.value);
final Color selectedColor = labelColor ?? themeData.primaryTextTheme.body2.color;
final Color unselectedColor = unselectedLabelColor ?? selectedColor.withAlpha(0xB2); // 70% alpha
final Color selectedColor =
labelColor
?? tabBarTheme.labelColor
?? themeData.primaryTextTheme.body2.color;
final Color unselectedColor =
unselectedLabelColor
?? tabBarTheme.unselectedLabelColor
?? selectedColor.withAlpha(0xB2); // 70% alpha
final Color color = selected
? Color.lerp(selectedColor, unselectedColor, animation.value)
: Color.lerp(unselectedColor, selectedColor, animation.value);
@ -504,6 +513,8 @@ class _TabBarScrollController extends ScrollController {
///
/// Requires one of its ancestors to be a [Material] widget.
///
/// Uses values from [ThemeData.tabBarTheme] if it is set in the current context.
///
/// See also:
///
/// * [TabBarView], which displays page views that correspond to each tab.
@ -687,8 +698,11 @@ class _TabBarState extends State<TabBar> {
Decoration get _indicator {
if (widget.indicator != null)
return widget.indicator;
final ThemeData themeData = Theme.of(context);
if (themeData.tabBarTheme.indicator != null)
return themeData.tabBarTheme.indicator;
Color color = widget.indicatorColor ?? Theme.of(context).indicatorColor;
Color color = widget.indicatorColor ?? themeData.indicatorColor;
// ThemeData tries to avoid this by having indicatorColor avoid being the
// primaryColor. However, it's possible that the tab bar is on a
// Material that isn't the primaryColor. In that case, if the indicator
@ -741,7 +755,7 @@ class _TabBarState extends State<TabBar> {
_indicatorPainter = _controller == null ? null : _IndicatorPainter(
controller: _controller,
indicator: _indicator,
indicatorSize: widget.indicatorSize,
indicatorSize: widget.indicatorSize ?? Theme.of(context).tabBarTheme.indicatorSize,
tabKeys: _tabKeys,
old: _indicatorPainter,
);

18
packages/flutter/lib/src/material/theme_data.dart
View File

@ -16,6 +16,7 @@ import 'ink_well.dart' show InteractiveInkFeatureFactory;
import 'input_decorator.dart';
import 'page_transitions_theme.dart';
import 'slider_theme.dart';
import 'tab_bar_theme.dart';
import 'typography.dart';
export 'package:flutter/services.dart' show Brightness;
@ -141,6 +142,7 @@ class ThemeData extends Diagnosticable {
IconThemeData primaryIconTheme,
IconThemeData accentIconTheme,
SliderThemeData sliderTheme,
TabBarTheme tabBarTheme,
ChipThemeData chipTheme,
TargetPlatform platform,
MaterialTapTargetSize materialTapTargetSize,
@ -185,6 +187,7 @@ class ThemeData extends Diagnosticable {
errorColor ??= Colors.red[700];
inputDecorationTheme ??= const InputDecorationTheme();
pageTransitionsTheme ??= const PageTransitionsTheme();
tabBarTheme ??= const TabBarTheme();
primaryIconTheme ??= primaryIsDark ? const IconThemeData(color: Colors.white) : const IconThemeData(color: Colors.black);
accentIconTheme ??= accentIsDark ? const IconThemeData(color: Colors.white) : const IconThemeData(color: Colors.black);
iconTheme ??= isDark ? const IconThemeData(color: Colors.white) : const IconThemeData(color: Colors.black87);
@ -207,6 +210,7 @@ class ThemeData extends Diagnosticable {
primaryColorDark: primaryColorDark,
valueIndicatorTextStyle: accentTextTheme.body2,
);
tabBarTheme ??= const TabBarTheme();
chipTheme ??= ChipThemeData.fromDefaults(
secondaryColor: primaryColor,
brightness: brightness,
@ -252,6 +256,7 @@ class ThemeData extends Diagnosticable {
primaryIconTheme: primaryIconTheme,
accentIconTheme: accentIconTheme,
sliderTheme: sliderTheme,
tabBarTheme: tabBarTheme,
chipTheme: chipTheme,
platform: platform,
materialTapTargetSize: materialTapTargetSize,
@ -307,6 +312,7 @@ class ThemeData extends Diagnosticable {
@required this.primaryIconTheme,
@required this.accentIconTheme,
@required this.sliderTheme,
@required this.tabBarTheme,
@required this.chipTheme,
@required this.platform,
@required this.materialTapTargetSize,
@ -348,6 +354,7 @@ class ThemeData extends Diagnosticable {
assert(primaryIconTheme != null),
assert(accentIconTheme != null),
assert(sliderTheme != null),
assert(tabBarTheme != null),
assert(chipTheme != null),
assert(platform != null),
assert(materialTapTargetSize != null),
@ -533,6 +540,9 @@ class ThemeData extends Diagnosticable {
/// This is the value returned from [SliderTheme.of].
final SliderThemeData sliderTheme;
/// A theme for customizing the size, shape, and color of the tab bar indicator.
final TabBarTheme tabBarTheme;
/// The colors and styles used to render [Chip], [
///
/// This is the value returned from [ChipTheme.of].
@ -600,6 +610,7 @@ class ThemeData extends Diagnosticable {
IconThemeData primaryIconTheme,
IconThemeData accentIconTheme,
SliderThemeData sliderTheme,
TabBarTheme tabBarTheme,
ChipThemeData chipTheme,
TargetPlatform platform,
MaterialTapTargetSize materialTapTargetSize,
@ -644,6 +655,7 @@ class ThemeData extends Diagnosticable {
primaryIconTheme: primaryIconTheme ?? this.primaryIconTheme,
accentIconTheme: accentIconTheme ?? this.accentIconTheme,
sliderTheme: sliderTheme ?? this.sliderTheme,
tabBarTheme: tabBarTheme ?? this.tabBarTheme,
chipTheme: chipTheme ?? this.chipTheme,
platform: platform ?? this.platform,
materialTapTargetSize: materialTapTargetSize ?? this.materialTapTargetSize,
@ -718,6 +730,7 @@ class ThemeData extends Diagnosticable {
/// Linearly interpolate between two themes.
///
/// {@template flutter.material.themeData.lerp}
/// The arguments must not be null.
///
/// The `t` argument represents position on the timeline, with 0.0 meaning
@ -731,6 +744,7 @@ class ThemeData extends Diagnosticable {
///
/// Values for `t` are usually obtained from an [Animation<double>], such as
/// an [AnimationController].
/// {@endtemplate}
static ThemeData lerp(ThemeData a, ThemeData b, double t) {
assert(a != null);
assert(b != null);
@ -774,6 +788,7 @@ class ThemeData extends Diagnosticable {
primaryIconTheme: IconThemeData.lerp(a.primaryIconTheme, b.primaryIconTheme, t),
accentIconTheme: IconThemeData.lerp(a.accentIconTheme, b.accentIconTheme, t),
sliderTheme: SliderThemeData.lerp(a.sliderTheme, b.sliderTheme, t),
tabBarTheme: TabBarTheme.lerp(a.tabBarTheme, b.tabBarTheme, t),
chipTheme: ChipThemeData.lerp(a.chipTheme, b.chipTheme, t),
platform: t < 0.5 ? a.platform : b.platform,
materialTapTargetSize: t < 0.5 ? a.materialTapTargetSize : b.materialTapTargetSize,
@ -827,6 +842,7 @@ class ThemeData extends Diagnosticable {
(otherData.primaryIconTheme == primaryIconTheme) &&
(otherData.accentIconTheme == accentIconTheme) &&
(otherData.sliderTheme == sliderTheme) &&
(otherData.tabBarTheme == tabBarTheme) &&
(otherData.chipTheme == chipTheme) &&
(otherData.platform == platform) &&
(otherData.materialTapTargetSize == materialTapTargetSize) &&
@ -883,6 +899,7 @@ class ThemeData extends Diagnosticable {
platform,
materialTapTargetSize,
pageTransitionsTheme,
tabBarTheme,
),
),
);
@ -928,6 +945,7 @@ class ThemeData extends Diagnosticable {
properties.add(DiagnosticsProperty<IconThemeData>('primaryIconTheme', primaryIconTheme));
properties.add(DiagnosticsProperty<IconThemeData>('accentIconTheme', accentIconTheme));
properties.add(DiagnosticsProperty<SliderThemeData>('sliderTheme', sliderTheme));
properties.add(DiagnosticsProperty<TabBarTheme>('tabBarTheme', tabBarTheme));
properties.add(DiagnosticsProperty<ChipThemeData>('chipTheme', chipTheme));
properties.add(DiagnosticsProperty<MaterialTapTargetSize>('materialTapTargetSize', materialTapTargetSize));
properties.add(DiagnosticsProperty<PageTransitionsTheme>('pageTransitionsTheme', pageTransitionsTheme));

126
packages/flutter/test/material/tab_bar_theme_test.dart Normal file
View File

@ -0,0 +1,126 @@
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:io' show Platform;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart';
const String _tab1Text = 'tab 1';
const String _tab2Text = 'tab 2';
const String _tab3Text = 'tab 3';
final Key _painterKey = UniqueKey();
const List<Tab> _tabs = <Tab>[
Tab(text: _tab1Text, icon: Icon(Icons.looks_one)),
Tab(text: _tab2Text, icon: Icon(Icons.looks_two)),
Tab(text: _tab3Text, icon: Icon(Icons.looks_3)),
];
Widget _buildTabBar({ List<Tab> tabs = _tabs }) {
final TabController _tabController = TabController(length: 3, vsync: const TestVSync());
return RepaintBoundary(
key: _painterKey,
child: TabBar(tabs: tabs, controller: _tabController),
);
}
Widget _withTheme(TabBarTheme theme) {
return MaterialApp(
theme: ThemeData(tabBarTheme: theme),
home: Scaffold(body: _buildTabBar()),
);
}
RenderParagraph _iconRenderObject(WidgetTester tester, IconData icon) {
return tester.renderObject<RenderParagraph>(
find.descendant(of: find.byIcon(icon), matching: find.byType(RichText)));
}
void main() {
testWidgets('Tab bar theme overrides label color (selected)', (WidgetTester tester) async {
const Color labelColor = Colors.black;
const TabBarTheme tabBarTheme = TabBarTheme(labelColor: labelColor);
await tester.pumpWidget(_withTheme(tabBarTheme));
final RenderParagraph textRenderObject = tester.renderObject<RenderParagraph>(find.text(_tab1Text));
expect(textRenderObject.text.style.color, equals(labelColor));
final RenderParagraph iconRenderObject = _iconRenderObject(tester, Icons.looks_one);
expect(iconRenderObject.text.style.color, equals(labelColor));
});
testWidgets('Tab bar theme overrides label color (unselected)', (WidgetTester tester) async {
const Color unselectedLabelColor = Colors.black;
const TabBarTheme tabBarTheme = TabBarTheme(unselectedLabelColor: unselectedLabelColor);
await tester.pumpWidget(_withTheme(tabBarTheme));
final RenderParagraph textRenderObject = tester.renderObject<RenderParagraph>(find.text(_tab2Text));
expect(textRenderObject.text.style.color, equals(unselectedLabelColor));
final RenderParagraph iconRenderObject = _iconRenderObject(tester, Icons.looks_two);
expect(iconRenderObject.text.style.color, equals(unselectedLabelColor));
});
testWidgets('Tab bar theme overrides tab indicator size (tab)', (WidgetTester tester) async {
const TabBarTheme tabBarTheme = TabBarTheme(indicatorSize: TabBarIndicatorSize.tab);
await tester.pumpWidget(_withTheme(tabBarTheme));
await expectLater(
find.byKey(_painterKey),
matchesGoldenFile('tab_bar_theme.tab_indicator_size_tab.png'),
skip: !Platform.isLinux,
);
});
testWidgets('Tab bar theme overrides tab indicator size (label)', (WidgetTester tester) async {
const TabBarTheme tabBarTheme = TabBarTheme(indicatorSize: TabBarIndicatorSize.label);
await tester.pumpWidget(_withTheme(tabBarTheme));
await expectLater(
find.byKey(_painterKey),
matchesGoldenFile('tab_bar_theme.tab_indicator_size_label.png'),
skip: !Platform.isLinux,
);
});
testWidgets('Tab bar theme - custom tab indicator', (WidgetTester tester) async {
final TabBarTheme tabBarTheme = TabBarTheme(
indicator: BoxDecoration(
border: Border.all(color: Colors.black),
shape: BoxShape.rectangle,
)
);
await tester.pumpWidget(_withTheme(tabBarTheme));
await expectLater(
find.byKey(_painterKey),
matchesGoldenFile('tab_bar_theme.custom_tab_indicator.png'),
skip: !Platform.isLinux,
);
});
testWidgets('Tab bar theme - beveled rect indicator', (WidgetTester tester) async {
final TabBarTheme tabBarTheme = TabBarTheme(
indicator: ShapeDecoration(
shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
color: Colors.black
),
);
await tester.pumpWidget(_withTheme(tabBarTheme));
await expectLater(
find.byKey(_painterKey),
matchesGoldenFile('tab_bar_theme.beveled_rect_indicator.png'),
skip: !Platform.isLinux,
);
});
}

2
packages/flutter/test/material/theme_test.dart
View File

@ -11,7 +11,7 @@ import 'package:flutter_test/flutter_test.dart';
void main() {
test('ThemeDataTween control test', () {
final ThemeData light = ThemeData.light();
final ThemeData dark = ThemeData.light();
final ThemeData dark = ThemeData.dark();
final ThemeDataTween tween = ThemeDataTween(begin: light, end: dark);
expect(tween.lerp(0.25), equals(ThemeData.lerp(light, dark, 0.25)));
});