Skip to content

[Material] Add TabBarTheme #22012

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
johnsonmh merged 12 commits into from
Sep 25, 2018
Merged

[Material] Add TabBarTheme #22012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
acd472d
Add tab bar theme.
johnsonmh Sep 12, 2018
6b4cf35
Add tab bar theme.
johnsonmh Sep 12, 2018
2804691
Add tests, pass context to getters.
johnsonmh Sep 18, 2018
a7da098
update goldens from linux box
johnsonmh Sep 19, 2018
0578919
update goldens from linux box
johnsonmh Sep 19, 2018
c0ff989
Added new golden test, addressed comments
johnsonmh Sep 19, 2018
531267d
override hashCode and == in TabBarTheme
johnsonmh Sep 21, 2018
2d7f0f6
Fix comment typos
johnsonmh Sep 21, 2018
f0b43e0
Addressed Hans' comments.
johnsonmh Sep 24, 2018
3a17852
Formatting changes
johnsonmh Sep 25, 2018
67e4a2a
[TabBarTheme] Fixed spacing
johnsonmh Sep 25, 2018
27fee7f
[TabBarTheme] Update goldens version to latest commit
johnsonmh Sep 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bin/internal/goldens.version
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
a7f6061b8171f6fc82b6f437d13079ee26189438
b84f87078729d0af8380fd9826091d8bafe6fcc7
1 change: 1 addition & 0 deletions packages/flutter/lib/material.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
94 changes: 94 additions & 0 deletions packages/flutter/lib/src/material/tab_bar_theme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Comment thread
johnsonmh marked this conversation as resolved.
Outdated

/// 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]).
Comment thread
johnsonmh marked this conversation as resolved.
Outdated
///
/// 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 {
Comment thread
willlarche marked this conversation as resolved.
Outdated
/// 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 changes: 18 additions & 4 deletions packages/flutter/lib/src/material/tabs.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
);
Expand Down
18 changes: 18 additions & 0 deletions packages/flutter/lib/src/material/theme_data.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -141,6 +142,7 @@ class ThemeData extends Diagnosticable {
IconThemeData primaryIconTheme,
IconThemeData accentIconTheme,
SliderThemeData sliderTheme,
TabBarTheme tabBarTheme,
ChipThemeData chipTheme,
TargetPlatform platform,
MaterialTapTargetSize materialTapTargetSize,
Expand Down Expand Up @@ -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);
Expand All @@ -207,6 +210,7 @@ class ThemeData extends Diagnosticable {
primaryColorDark: primaryColorDark,
valueIndicatorTextStyle: accentTextTheme.body2,
);
tabBarTheme ??= const TabBarTheme();
chipTheme ??= ChipThemeData.fromDefaults(
secondaryColor: primaryColor,
brightness: brightness,
Expand Down Expand Up @@ -252,6 +256,7 @@ class ThemeData extends Diagnosticable {
primaryIconTheme: primaryIconTheme,
accentIconTheme: accentIconTheme,
sliderTheme: sliderTheme,
tabBarTheme: tabBarTheme,
chipTheme: chipTheme,
platform: platform,
materialTapTargetSize: materialTapTargetSize,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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].
Expand Down Expand Up @@ -600,6 +610,7 @@ class ThemeData extends Diagnosticable {
IconThemeData primaryIconTheme,
IconThemeData accentIconTheme,
SliderThemeData sliderTheme,
TabBarTheme tabBarTheme,
ChipThemeData chipTheme,
TargetPlatform platform,
MaterialTapTargetSize materialTapTargetSize,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -718,6 +730,7 @@ class ThemeData extends Diagnosticable {

/// Linearly interpolate between two themes.
///
/// {@template flutter.material.themeData.lerp}
Comment thread
johnsonmh marked this conversation as resolved.
Outdated
/// The arguments must not be null.
///
/// The `t` argument represents position on the timeline, with 0.0 meaning
Expand All @@ -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);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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) &&
Expand Down Expand Up @@ -883,6 +899,7 @@ class ThemeData extends Diagnosticable {
platform,
materialTapTargetSize,
pageTransitionsTheme,
tabBarTheme,
),
),
);
Expand Down Expand Up @@ -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));
Expand Down
Loading