text.dart 17.4 KB
Newer Older
1 2 3 4
// Copyright 2016 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/foundation.dart';
6
import 'package:flutter/painting.dart';
7 8 9

import 'basic.dart';
import 'framework.dart';
10
import 'inherited_theme.dart';
11 12
import 'media_query.dart';

13 14 15
// Examples can assume:
// String _name;

16
/// The text style to apply to descendant [Text] widgets without explicit style.
17 18 19 20 21 22 23
///
/// See also:
///
///  * [AnimatedDefaultTextStyle], which animates changes in the text style
///    smoothly over a given duration.
///  * [DefaultTextStyleTransition], which takes a provided [Animation] to
///    animate changes in text style smoothly over time.
24
class DefaultTextStyle extends InheritedTheme {
25 26
  /// Creates a default text style for the given subtree.
  ///
27
  /// Consider using [DefaultTextStyle.merge] to inherit styling information
28
  /// from the current default text style for a given [BuildContext].
29 30 31 32 33 34 35 36
  ///
  /// The [style] and [child] arguments are required and must not be null.
  ///
  /// The [softWrap] and [overflow] arguments must not be null (though they do
  /// have default values).
  ///
  /// The [maxLines] property may be null (and indeed defaults to null), but if
  /// it is not null, it must be greater than zero.
37
  const DefaultTextStyle({
38 39 40
    Key key,
    @required this.style,
    this.textAlign,
41 42
    this.softWrap = true,
    this.overflow = TextOverflow.clip,
43
    this.maxLines,
44
    this.textWidthBasis = TextWidthBasis.parent,
45
    @required Widget child,
46 47 48
  }) : assert(style != null),
       assert(softWrap != null),
       assert(overflow != null),
49
       assert(maxLines == null || maxLines > 0),
50
       assert(child != null),
51
       assert(textWidthBasis != null),
52
       super(key: key, child: child);
53 54 55 56

  /// A const-constructible default text style that provides fallback values.
  ///
  /// Returned from [of] when the given [BuildContext] doesn't have an enclosing default text style.
57 58 59
  ///
  /// This constructor creates a [DefaultTextStyle] that lacks a [child], which
  /// means the constructed value cannot be incorporated into the tree.
60 61 62 63
  const DefaultTextStyle.fallback()
    : style = const TextStyle(),
      textAlign = null,
      softWrap = true,
64
      maxLines = null,
65 66
      overflow = TextOverflow.clip,
      textWidthBasis = TextWidthBasis.parent;
67

68 69
  /// Creates a default text style that overrides the text styles in scope at
  /// this point in the widget tree.
70 71
  ///
  /// The given [style] is merged with the [style] from the default text style
72 73 74
  /// for the [BuildContext] where the widget is inserted, and any of the other
  /// arguments that are not null replace the corresponding properties on that
  /// same default text style.
75 76 77 78 79 80 81 82 83
  ///
  /// This constructor cannot be used to override the [maxLines] property of the
  /// ancestor with the value null, since null here is used to mean "defer to
  /// ancestor". To replace a non-null [maxLines] from an ancestor with the null
  /// value (to remove the restriction on number of lines), manually obtain the
  /// ambient [DefaultTextStyle] using [DefaultTextStyle.of], then create a new
  /// [DefaultTextStyle] using the [new DefaultTextStyle] constructor directly.
  /// See the source below for an example of how to do this (since that's
  /// essentially what this constructor does).
84
  static Widget merge({
85 86 87 88 89
    Key key,
    TextStyle style,
    TextAlign textAlign,
    bool softWrap,
    TextOverflow overflow,
90
    int maxLines,
91
    TextWidthBasis textWidthBasis,
92
    @required Widget child,
93 94
  }) {
    assert(child != null);
95
    return Builder(
96 97
      builder: (BuildContext context) {
        final DefaultTextStyle parent = DefaultTextStyle.of(context);
98
        return DefaultTextStyle(
99 100 101 102 103 104
          key: key,
          style: parent.style.merge(style),
          textAlign: textAlign ?? parent.textAlign,
          softWrap: softWrap ?? parent.softWrap,
          overflow: overflow ?? parent.overflow,
          maxLines: maxLines ?? parent.maxLines,
105
          textWidthBasis: textWidthBasis ?? parent.textWidthBasis,
106
          child: child,
107 108
        );
      },
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
    );
  }

  /// The text style to apply.
  final TextStyle style;

  /// How the text should be aligned horizontally.
  final TextAlign textAlign;

  /// Whether the text should break at soft line breaks.
  ///
  /// If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.
  final bool softWrap;

  /// How visual overflow should be handled.
  final TextOverflow overflow;

126 127 128
  /// An optional maximum number of lines for the text to span, wrapping if necessary.
  /// If the text exceeds the given number of lines, it will be truncated according
  /// to [overflow].
129 130 131 132 133 134
  ///
  /// If this is 1, text will not wrap. Otherwise, text will be wrapped at the
  /// edge of the box.
  ///
  /// If this is non-null, it will override even explicit null values of
  /// [Text.maxLines].
135 136
  final int maxLines;

137
  /// The strategy to use when calculating the width of the Text.
138
  ///
139 140 141
  /// See [TextWidthBasis] for possible values and their implications.
  final TextWidthBasis textWidthBasis;

142 143 144 145
  /// The closest instance of this class that encloses the given context.
  ///
  /// If no such instance exists, returns an instance created by
  /// [DefaultTextStyle.fallback], which contains fallback values.
146 147 148 149 150 151
  ///
  /// Typical usage is as follows:
  ///
  /// ```dart
  /// DefaultTextStyle style = DefaultTextStyle.of(context);
  /// ```
152 153 154 155 156
  static DefaultTextStyle of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(DefaultTextStyle) ?? const DefaultTextStyle.fallback();
  }

  @override
157 158 159 160 161
  bool updateShouldNotify(DefaultTextStyle oldWidget) {
    return style != oldWidget.style ||
        textAlign != oldWidget.textAlign ||
        softWrap != oldWidget.softWrap ||
        overflow != oldWidget.overflow ||
162 163
        maxLines != oldWidget.maxLines ||
        textWidthBasis != oldWidget.textWidthBasis;
164 165 166 167 168 169 170 171 172 173 174 175 176 177
  }

  @override
  Widget wrap(BuildContext context, Widget child) {
    final DefaultTextStyle defaultTextStyle = context.ancestorWidgetOfExactType(DefaultTextStyle);
    return identical(this, defaultTextStyle) ? child : DefaultTextStyle(
      style: style,
      textAlign: textAlign,
      softWrap: softWrap,
      overflow: overflow,
      maxLines: maxLines,
      textWidthBasis: textWidthBasis,
      child: child,
    );
178
  }
179 180

  @override
181 182 183
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    style?.debugFillProperties(properties);
184 185 186 187
    properties.add(EnumProperty<TextAlign>('textAlign', textAlign, defaultValue: null));
    properties.add(FlagProperty('softWrap', value: softWrap, ifTrue: 'wrapping at box width', ifFalse: 'no wrapping except at line break characters', showName: true));
    properties.add(EnumProperty<TextOverflow>('overflow', overflow, defaultValue: null));
    properties.add(IntProperty('maxLines', maxLines, defaultValue: null));
188
    properties.add(EnumProperty<TextWidthBasis>('textWidthBasis', textWidthBasis, defaultValue: TextWidthBasis.parent));
189 190 191 192 193 194 195 196 197 198 199
  }
}

/// A run of text with a single style.
///
/// The [Text] widget displays a string of text with single style. The string
/// might break across multiple lines or might all be displayed on the same line
/// depending on the layout constraints.
///
/// The [style] argument is optional. When omitted, the text will use the style
/// from the closest enclosing [DefaultTextStyle]. If the given style's
200 201 202 203
/// [TextStyle.inherit] property is true (the default), the given style will
/// be merged with the closest enclosing [DefaultTextStyle]. This merging
/// behavior is useful, for example, to make the text bold while using the
/// default font family and size.
204
///
205
/// {@tool sample}
206
///
207 208
/// This example shows how to display text using the [Text] widget with the
/// [overflow] set to [TextOverflow.ellipsis].
209
///
210
/// ![If the text is shorter than the available space, it is displayed in full without an ellipsis.](https://flutter.github.io/assets-for-api-docs/assets/widgets/text.png)
211
///
212
/// ![If the text overflows, the Text widget displays an ellipsis to trim the overflowing text](https://flutter.github.io/assets-for-api-docs/assets/widgets/text_ellipsis.png)
213
///
214
/// ```dart
215
/// Text(
216
///   'Hello, $_name! How are you?',
217 218
///   textAlign: TextAlign.center,
///   overflow: TextOverflow.ellipsis,
219
///   style: TextStyle(fontWeight: FontWeight.bold),
220 221
/// )
/// ```
222
/// {@end-tool}
223
///
224 225 226 227 228
/// Using the [Text.rich] constructor, the [Text] widget can
/// display a paragraph with differently styled [TextSpan]s. The sample
/// that follows displays "Hello beautiful world" with different styles
/// for each word.
///
229
/// {@tool sample}
230
///
231
/// ![The word "Hello" is shown with the default text styles. The word "beautiful" is italicized. The word "world" is bold.](https://flutter.github.io/assets-for-api-docs/assets/widgets/text_rich.png)
232
///
233 234
/// ```dart
/// const Text.rich(
235
///   TextSpan(
236
///     text: 'Hello', // default text style
237 238 239
///     children: <TextSpan>[
///       TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
///       TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
240 241
///     ],
///   ),
242
/// )
243
/// ```
244
/// {@end-tool}
245
///
246 247 248 249 250 251 252 253 254 255 256 257 258
/// ## Interactivity
///
/// To make [Text] react to touch events, wrap it in a [GestureDetector] widget
/// with a [GestureDetector.onTap] handler.
///
/// In a material design application, consider using a [FlatButton] instead, or
/// if that isn't appropriate, at least using an [InkWell] instead of
/// [GestureDetector].
///
/// To make sections of the text interactive, use [RichText] and specify a
/// [TapGestureRecognizer] as the [TextSpan.recognizer] of the relevant part of
/// the text.
///
259 260
/// See also:
///
261 262
///  * [RichText], which gives you more control over the text styles.
///  * [DefaultTextStyle], which sets default styles for [Text] widgets.
263 264 265 266 267
class Text extends StatelessWidget {
  /// Creates a text widget.
  ///
  /// If the [style] argument is null, the text will use the style from the
  /// closest enclosing [DefaultTextStyle].
268 269
  ///
  /// The [data] parameter must not be null.
270 271
  const Text(
    this.data, {
272 273
    Key key,
    this.style,
274
    this.strutStyle,
275
    this.textAlign,
Ian Hickson's avatar
Ian Hickson committed
276
    this.textDirection,
277
    this.locale,
278 279
    this.softWrap,
    this.overflow,
280 281
    this.textScaleFactor,
    this.maxLines,
282
    this.semanticsLabel,
283
    this.textWidthBasis,
284 285 286 287
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
288
       textSpan = null,
289
       super(key: key);
290

291 292 293 294 295 296
  /// Creates a text widget with a [InlineSpan].
  ///
  /// The following subclasses of [InlineSpan] may be used to build rich text:
  ///
  /// * [TextSpan]s define text and children [InlineSpan]s.
  /// * [WidgetSpan]s define embedded inline widgets.
297 298
  ///
  /// The [textSpan] parameter must not be null.
299 300
  ///
  /// See [RichText] which provides a lower-level way to draw text.
301 302
  const Text.rich(
    this.textSpan, {
303 304
    Key key,
    this.style,
305
    this.strutStyle,
306 307
    this.textAlign,
    this.textDirection,
308
    this.locale,
309 310 311 312
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
313
    this.semanticsLabel,
314
    this.textWidthBasis,
315 316 317 318
  }) : assert(
         textSpan != null,
         'A non-null TextSpan must be provided to a Text.rich widget.',
       ),
319 320
       data = null,
       super(key: key);
321

322
  /// The text to display.
323 324
  ///
  /// This will be null if a [textSpan] is provided instead.
325 326
  final String data;

327
  /// The text to display as a [InlineSpan].
328 329
  ///
  /// This will be null if [data] is provided instead.
330
  final InlineSpan textSpan;
331

332 333 334 335 336 337 338
  /// If non-null, the style to use for this text.
  ///
  /// If the style's "inherit" property is true, the style will be merged with
  /// the closest enclosing [DefaultTextStyle]. Otherwise, the style will
  /// replace the closest enclosing [DefaultTextStyle].
  final TextStyle style;

339 340 341
  /// {@macro flutter.painting.textPainter.strutStyle}
  final StrutStyle strutStyle;

342 343 344
  /// How the text should be aligned horizontally.
  final TextAlign textAlign;

Ian Hickson's avatar
Ian Hickson committed
345 346 347 348 349 350 351 352 353
  /// The directionality of the text.
  ///
  /// This decides how [textAlign] values like [TextAlign.start] and
  /// [TextAlign.end] are interpreted.
  ///
  /// This is also used to disambiguate how to render bidirectional text. For
  /// example, if the [data] is an English phrase followed by a Hebrew phrase,
  /// in a [TextDirection.ltr] context the English phrase will be on the left
  /// and the Hebrew phrase to its right, while in a [TextDirection.rtl]
354
  /// context, the English phrase will be on the right and the Hebrew phrase on
Ian Hickson's avatar
Ian Hickson committed
355 356 357 358 359
  /// its left.
  ///
  /// Defaults to the ambient [Directionality], if any.
  final TextDirection textDirection;

360 361 362 363 364 365 366 367 368
  /// Used to select a font when the same Unicode character can
  /// be rendered differently, depending on the locale.
  ///
  /// It's rarely necessary to set this property. By default its value
  /// is inherited from the enclosing app with `Localizations.localeOf(context)`.
  ///
  /// See [RenderParagraph.locale] for more information.
  final Locale locale;

369 370 371 372 373 374 375 376 377 378 379 380 381
  /// Whether the text should break at soft line breaks.
  ///
  /// If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.
  final bool softWrap;

  /// How visual overflow should be handled.
  final TextOverflow overflow;

  /// The number of font pixels for each logical pixel.
  ///
  /// For example, if the text scale factor is 1.5, text will be 50% larger than
  /// the specified font size.
  ///
382
  /// The value given to the constructor as textScaleFactor. If null, will
383
  /// use the [MediaQueryData.textScaleFactor] obtained from the ambient
384
  /// [MediaQuery], or 1.0 if there is no [MediaQuery] in scope.
385 386
  final double textScaleFactor;

387
  /// An optional maximum number of lines for the text to span, wrapping if necessary.
388 389
  /// If the text exceeds the given number of lines, it will be truncated according
  /// to [overflow].
390 391 392 393 394 395 396 397
  ///
  /// If this is 1, text will not wrap. Otherwise, text will be wrapped at the
  /// edge of the box.
  ///
  /// If this is null, but there is an ambient [DefaultTextStyle] that specifies
  /// an explicit number for its [DefaultTextStyle.maxLines], then the
  /// [DefaultTextStyle] value will take precedence. You can use a [RichText]
  /// widget directly to entirely override the [DefaultTextStyle].
398 399
  final int maxLines;

400 401 402
  /// An alternative semantics label for this text.
  ///
  /// If present, the semantics of this widget will contain this value instead
403 404
  /// of the actual text. This will overwrite any of the semantics labels applied
  /// directly to the [TextSpan]s.
405
  ///
406
  /// This is useful for replacing abbreviations or shorthands with the full
407 408 409
  /// text value:
  ///
  /// ```dart
410
  /// Text(r'$$', semanticsLabel: 'Double dollars')
411 412 413
  /// ```
  final String semanticsLabel;

414
  /// {@macro flutter.painting.textPainter.textWidthBasis}
415 416
  final TextWidthBasis textWidthBasis;

417 418
  @override
  Widget build(BuildContext context) {
419
    final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);
420 421 422
    TextStyle effectiveTextStyle = style;
    if (style == null || style.inherit)
      effectiveTextStyle = defaultTextStyle.style.merge(style);
423 424
    if (MediaQuery.boldTextOverride(context))
      effectiveTextStyle = effectiveTextStyle.merge(const TextStyle(fontWeight: FontWeight.bold));
425
    Widget result = RichText(
Ian Hickson's avatar
Ian Hickson committed
426 427
      textAlign: textAlign ?? defaultTextStyle.textAlign ?? TextAlign.start,
      textDirection: textDirection, // RichText uses Directionality.of to obtain a default if this is null.
428
      locale: locale, // RichText uses Localizations.localeOf to obtain a default if this is null
429 430
      softWrap: softWrap ?? defaultTextStyle.softWrap,
      overflow: overflow ?? defaultTextStyle.overflow,
431
      textScaleFactor: textScaleFactor ?? MediaQuery.textScaleFactorOf(context),
432
      maxLines: maxLines ?? defaultTextStyle.maxLines,
433
      strutStyle: strutStyle,
434
      textWidthBasis: textWidthBasis ?? defaultTextStyle.textWidthBasis,
435
      text: TextSpan(
436
        style: effectiveTextStyle,
437
        text: data,
438 439
        children: textSpan != null ? <TextSpan>[textSpan] : null,
      ),
440
    );
441
    if (semanticsLabel != null) {
442
      result = Semantics(
443 444
        textDirection: textDirection,
        label: semanticsLabel,
445
        child: ExcludeSemantics(
446
          child: result,
447
        ),
448 449 450
      );
    }
    return result;
451 452 453
  }

  @override
454 455
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
456
    properties.add(StringProperty('data', data, showName: false));
457
    if (textSpan != null) {
458
      properties.add(textSpan.toDiagnosticsNode(name: 'textSpan', style: DiagnosticsTreeStyle.transition));
459
    }
460
    style?.debugFillProperties(properties);
461 462 463 464 465 466 467
    properties.add(EnumProperty<TextAlign>('textAlign', textAlign, defaultValue: null));
    properties.add(EnumProperty<TextDirection>('textDirection', textDirection, defaultValue: null));
    properties.add(DiagnosticsProperty<Locale>('locale', locale, defaultValue: null));
    properties.add(FlagProperty('softWrap', value: softWrap, ifTrue: 'wrapping at box width', ifFalse: 'no wrapping except at line break characters', showName: true));
    properties.add(EnumProperty<TextOverflow>('overflow', overflow, defaultValue: null));
    properties.add(DoubleProperty('textScaleFactor', textScaleFactor, defaultValue: null));
    properties.add(IntProperty('maxLines', maxLines, defaultValue: null));
468
    if (semanticsLabel != null) {
469
      properties.add(StringProperty('semanticsLabel', semanticsLabel));
470
    }
471 472
  }
}