theme.dart 6.11 KB
Newer Older
1 2 3 4
// Copyright 2015 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.

5
import 'package:flutter/widgets.dart';
6
import 'package:meta/meta.dart';
7

8 9
import 'theme_data.dart';

10
export 'theme_data.dart' show Brightness, ThemeData;
11

12
/// The duration over which theme changes animate.
13
const Duration kThemeAnimationDuration = const Duration(milliseconds: 200);
14

15
/// Applies a theme to descendant widgets.
16 17 18 19 20
///
/// See also:
///
///  * [AnimatedTheme]
///  * [ThemeData]
21
///  * [MaterialApp]
22
class Theme extends InheritedWidget {
23 24
  /// Applies the given theme [data] to [child].
  ///
25
  /// The [data] and [child] arguments must not be null.
26
  Theme({
27
    Key key,
28
    @required this.data,
29
    this.isMaterialAppTheme: false,
30 31 32 33 34 35
    Widget child
  }) : super(key: key, child: child) {
    assert(child != null);
    assert(data != null);
  }

36
  /// Specifies the color and typography values for descendant widgets.
37 38
  final ThemeData data;

39 40 41 42 43 44 45 46 47 48 49
  /// True if this theme was installed by the [MaterialApp].
  ///
  /// When an app uses the [Navigator] to push a route, the route's widgets
  /// will only inherit from the app's theme, even though the widget that
  /// triggered the push may inherit from a theme that "shadows" the app's
  /// theme because it's deeper in the widget tree. Apps can find the shadowing
  /// theme with `Theme.of(context, shadowThemeOnly: true)` and pass it along
  /// to the class that creates a route's widgets. Material widgets that push
  /// routes, like [PopupMenuButton] and [DropdownButton], do this.
  final bool isMaterialAppTheme;

50 51
  static final ThemeData _kFallbackTheme = new ThemeData.fallback();

52 53 54
  /// The data from the closest instance of this class that encloses the given context.
  ///
  /// Defaults to the fallback theme data if none exists.
55 56 57 58 59 60 61
  ///
  /// If [shadowThemeOnly] is true and the closest Theme ancestor was installed by
  /// the [MaterialApp] - in other words if the closest Theme ancestor does not
  /// shadow the app's theme - then return null. This property is specified in
  /// situations where its useful to wrap a route's widgets with a Theme, but only
  /// when the app's theme is being shadowed by a theme widget that is farather
  /// down in the tree. See [isMaterialAppTheme].
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
  ///
  /// Typical usage is as follows:
  ///
  /// ```dart
  /// @override
  /// Widget build(BuildContext context) {
  ///   return new Text(
  ///     'Example',
  ///     style: Theme.of(context).textTheme.title,
  ///   );
  /// }
  /// ```
  ///
  /// When the [Theme] is actually created in the same `build` function
  /// (possibly indirectly, e.g. as part of a [MaterialApp]), the `context`
  /// argument to the `build` function can't be used to find the [Theme] (since
  /// it's "above" the widget being returned). In such cases, the following
  /// technique with a [Builder] can be used to provide a new scope with a
  /// [BuildContext] that is "under" the [Theme]:
  ///
  /// ```dart
  /// @override
  /// Widget build(BuildContext context) {
  ///   return new MaterialApp(
  ///     theme: new ThemeData.light(),
  ///     body: new Builder(
  ///       // Create an inner BuildContext so that we can refer to
  ///       // the Theme with Theme.of().
  ///       builder: (BuildContext context) {
  ///         return new Center(
  ///           child: new Text(
  ///             'Example',
  ///             style: Theme.of(context).textTheme.title,
  ///           ),
  ///         );
  ///       },
  ///     ),
  ///   );
  /// }
  /// ```
102 103 104 105
  static ThemeData of(BuildContext context, { bool shadowThemeOnly: false }) {
    final Theme theme = context.inheritFromWidgetOfExactType(Theme);
    final ThemeData themeData = theme?.data ?? _kFallbackTheme;
    return shadowThemeOnly ? (theme.isMaterialAppTheme ? null : themeData) : themeData;
106 107
  }

108
  @override
109
  bool updateShouldNotify(Theme old) => data != old.data;
Hixie's avatar
Hixie committed
110

111
  @override
Hixie's avatar
Hixie committed
112 113 114 115
  void debugFillDescription(List<String> description) {
    super.debugFillDescription(description);
    description.add('$data');
  }
116
}
117

118 119
/// An animated value that interpolates [ThemeData]s.
class ThemeDataTween extends Tween<ThemeData> {
120
  /// Creates an interpolation between [begin] and [end].
121
  ThemeDataTween({ ThemeData begin, ThemeData end }) : super(begin: begin, end: end);
122

123
  @override
124 125 126 127 128
  ThemeData lerp(double t) => ThemeData.lerp(begin, end, t);
}

/// Animated version of [Theme] which automatically transitions the colours,
/// etc, over a given duration whenever the given theme changes.
129 130 131 132
///
/// See also:
///
///  * [ThemeData]
133
class AnimatedTheme extends ImplicitlyAnimatedWidget {
134 135
  /// Creates an animated theme.
  ///
136 137
  /// By default, the theme transition uses a linear curve. The [data] and
  /// [child] arguments must not be null.
138 139
  AnimatedTheme({
    Key key,
140
    @required this.data,
141
    this.isMaterialAppTheme: false,
142
    Curve curve: Curves.linear,
143
    Duration duration: kThemeAnimationDuration,
144 145 146 147 148 149
    this.child
  }) : super(key: key, curve: curve, duration: duration) {
    assert(child != null);
    assert(data != null);
  }

150
  /// Specifies the color and typography values for descendant widgets.
151 152
  final ThemeData data;

153 154 155
  /// True if this theme was created by the [MaterialApp]. See [Theme.isMaterialAppTheme].
  final bool isMaterialAppTheme;

156
  /// The widget below this widget in the tree.
157 158
  final Widget child;

159
  @override
160 161 162 163
  _AnimatedThemeState createState() => new _AnimatedThemeState();
}

class _AnimatedThemeState extends AnimatedWidgetBaseState<AnimatedTheme> {
164
  ThemeDataTween _data;
165

166
  @override
167
  void forEachTween(TweenVisitor<dynamic> visitor) {
168
    // TODO(ianh): Use constructor tear-offs when it becomes possible
169
    _data = visitor(_data, config.data, (dynamic value) => new ThemeDataTween(begin: value));
170 171 172
    assert(_data != null);
  }

173
  @override
174 175
  Widget build(BuildContext context) {
    return new Theme(
176
      isMaterialAppTheme: config.isMaterialAppTheme,
177
      child: config.child,
178
      data: _data.evaluate(animation)
179 180 181
    );
  }

182
  @override
183 184 185 186 187 188
  void debugFillDescription(List<String> description) {
    super.debugFillDescription(description);
    if (_data != null)
      description.add('$_data');
  }
}