floating_action_button.dart 22.4 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5 6
import 'dart:math' as math;

7
import 'package:flutter/foundation.dart';
8
import 'package:flutter/rendering.dart';
9
import 'package:flutter/widgets.dart';
10

11
import 'button.dart';
12
import 'colors.dart';
13
import 'floating_action_button_theme.dart';
14
import 'scaffold.dart';
15
import 'theme.dart';
16
import 'theme_data.dart';
Adam Barth's avatar
Adam Barth committed
17
import 'tooltip.dart';
18

19
const BoxConstraints _kSizeConstraints = BoxConstraints.tightFor(
20 21 22 23
  width: 56.0,
  height: 56.0,
);

24
const BoxConstraints _kMiniSizeConstraints = BoxConstraints.tightFor(
25 26 27 28
  width: 40.0,
  height: 40.0,
);

29
const BoxConstraints _kExtendedSizeConstraints = BoxConstraints(
30 31 32
  minHeight: 48.0,
  maxHeight: 48.0,
);
33 34 35 36 37 38

class _DefaultHeroTag {
  const _DefaultHeroTag();
  @override
  String toString() => '<default FloatingActionButton tag>';
}
39

40
/// A material design floating action button.
41 42
///
/// A floating action button is a circular icon button that hovers over content
43 44
/// to promote a primary action in the application. Floating action buttons are
/// most commonly used in the [Scaffold.floatingActionButton] field.
45
///
46 47
/// {@youtube 560 315 https://www.youtube.com/watch?v=2uaoEDOgk_I}
///
48 49
/// Use at most a single floating action button per screen. Floating action
/// buttons should be used for positive actions such as "create", "share", or
50 51 52
/// "navigate". (If more than one floating action button is used within a
/// [Route], then make sure that each button has a unique [heroTag], otherwise
/// an exception will be thrown.)
53
///
54
/// If the [onPressed] callback is null, then the button will be disabled and
55 56 57 58
/// will not react to touch. It is highly discouraged to disable a floating
/// action button as there is no indication to the user that the button is
/// disabled. Consider changing the [backgroundColor] if disabling the floating
/// action button.
59
///
60
/// {@tool dartpad --template=stateless_widget_material}
61
/// This example shows how to display a [FloatingActionButton] in a
62 63
/// [Scaffold], with a pink [backgroundColor] and a thumbs up [Icon].
///
64
/// ![](https://flutter.github.io/assets-for-api-docs/assets/material/floating_action_button.png)
65
///
66 67 68 69
/// ```dart
/// Widget build(BuildContext context) {
///   return Scaffold(
///     appBar: AppBar(
70
///       title: const Text('Floating Action Button'),
71 72
///     ),
///     body: Center(
73
///       child: const Text('Press the button below!')
74 75 76 77 78
///     ),
///     floatingActionButton: FloatingActionButton(
///       onPressed: () {
///         // Add your onPressed code here!
///       },
79 80
///       child: Icon(Icons.navigation),
///       backgroundColor: Colors.green,
81 82 83 84 85 86
///     ),
///   );
/// }
/// ```
/// {@end-tool}
///
87
/// {@tool dartpad --template=stateless_widget_material}
88
/// This example shows how to make an extended [FloatingActionButton] in a
89
/// [Scaffold], with a  pink [backgroundColor], a thumbs up [Icon] and a
90
/// [Text] label that reads "Approve".
91
///
92
/// ![](https://flutter.github.io/assets-for-api-docs/assets/material/floating_action_button_label.png)
93
///
94 95 96 97
/// ```dart
/// Widget build(BuildContext context) {
///   return Scaffold(
///     appBar: AppBar(
98
///       title: const Text('Floating Action Button Label'),
99 100
///     ),
///     body: Center(
101
///       child: const Text('Press the button with a label below!'),
102 103 104 105 106 107 108 109 110 111 112 113 114 115
///     ),
///     floatingActionButton: FloatingActionButton.extended(
///       onPressed: () {
///         // Add your onPressed code here!
///       },
///       label: Text('Approve'),
///       icon: Icon(Icons.thumb_up),
///       backgroundColor: Colors.pink,
///     ),
///   );
/// }
/// ```
/// {@end-tool}
///
116 117
/// See also:
///
118
///  * [Scaffold], in which floating action buttons typically live.
119
///  * [ElevatedButton], a filled button whose material elevates when pressed.
120
///  * <https://material.io/design/components/buttons-floating-action-button.html>
121
class FloatingActionButton extends StatelessWidget {
122
  /// Creates a circular floating action button.
123
  ///
124
  /// The [mini] and [clipBehavior] arguments must not be null. Additionally,
125 126
  /// [elevation], [highlightElevation], and [disabledElevation] (if specified)
  /// must be non-negative.
127
  const FloatingActionButton({
128
    Key? key,
129
    this.child,
Adam Barth's avatar
Adam Barth committed
130
    this.tooltip,
131
    this.foregroundColor,
132
    this.backgroundColor,
133 134
    this.focusColor,
    this.hoverColor,
135
    this.splashColor,
136
    this.heroTag = const _DefaultHeroTag(),
137
    this.elevation,
138 139
    this.focusElevation,
    this.hoverElevation,
140 141
    this.highlightElevation,
    this.disabledElevation,
142
    required this.onPressed,
143
    this.mouseCursor,
144
    this.mini = false,
145
    this.shape,
146
    this.clipBehavior = Clip.none,
147
    this.focusNode,
148
    this.autofocus = false,
149
    this.materialTapTargetSize,
150
    this.isExtended = false,
151
  }) : assert(elevation == null || elevation >= 0.0),
152 153
       assert(focusElevation == null || focusElevation >= 0.0),
       assert(hoverElevation == null || hoverElevation >= 0.0),
154
       assert(highlightElevation == null || highlightElevation >= 0.0),
155 156
       assert(disabledElevation == null || disabledElevation >= 0.0),
       assert(mini != null),
157
       assert(clipBehavior != null),
158
       assert(isExtended != null),
159
       assert(autofocus != null),
160 161
       _sizeConstraints = mini ? _kMiniSizeConstraints : _kSizeConstraints,
       super(key: key);
162

163 164
  /// Creates a wider [StadiumBorder]-shaped floating action button with
  /// an optional [icon] and a [label].
165
  ///
166
  /// The [label], [autofocus], and [clipBehavior] arguments must not be null.
167 168
  /// Additionally, [elevation], [highlightElevation], and [disabledElevation]
  /// (if specified) must be non-negative.
169
  FloatingActionButton.extended({
170
    Key? key,
171 172 173
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
174 175
    this.focusColor,
    this.hoverColor,
176
    this.heroTag = const _DefaultHeroTag(),
177
    this.elevation,
178 179
    this.focusElevation,
    this.hoverElevation,
180
    this.splashColor,
181 182
    this.highlightElevation,
    this.disabledElevation,
183
    required this.onPressed,
184
    this.mouseCursor = SystemMouseCursors.click,
185
    this.shape,
186
    this.isExtended = true,
187
    this.materialTapTargetSize,
188
    this.clipBehavior = Clip.none,
189
    this.focusNode,
190
    this.autofocus = false,
191 192
    Widget? icon,
    required Widget label,
193
  }) : assert(elevation == null || elevation >= 0.0),
194 195
       assert(focusElevation == null || focusElevation >= 0.0),
       assert(hoverElevation == null || hoverElevation >= 0.0),
196
       assert(highlightElevation == null || highlightElevation >= 0.0),
197 198
       assert(disabledElevation == null || disabledElevation >= 0.0),
       assert(isExtended != null),
199
       assert(clipBehavior != null),
200
       assert(autofocus != null),
201 202 203 204 205
       _sizeConstraints = _kExtendedSizeConstraints,
       mini = false,
       child = _ChildOverflowBox(
         child: Row(
           mainAxisSize: MainAxisSize.min,
206 207 208 209 210 211
           children: icon == null
             ? <Widget>[
                 const SizedBox(width: 20.0),
                 label,
                 const SizedBox(width: 20.0),
               ]
212 213 214 215 216
             : !isExtended ? <Widget>[
               const SizedBox(width: 20.0),
               icon,
               const SizedBox(width: 20.0),
           ] : <Widget>[
217 218 219 220 221 222
                 const SizedBox(width: 16.0),
                 icon,
                 const SizedBox(width: 8.0),
                 label,
                 const SizedBox(width: 20.0),
               ],
223 224 225
         ),
       ),
       super(key: key);
226

227
  /// The widget below this widget in the tree.
228 229
  ///
  /// Typically an [Icon].
230
  final Widget? child;
231

232 233 234 235
  /// Text that describes the action that will occur when the button is pressed.
  ///
  /// This text is displayed when the user long-presses on the button and is
  /// used for accessibility.
236
  final String? tooltip;
237

238
  /// The default foreground color for icons and text within the button.
239
  ///
240 241 242 243 244
  /// If this property is null, then the
  /// [FloatingActionButtonThemeData.foregroundColor] of
  /// [ThemeData.floatingActionButtonTheme] is used. If that property is also
  /// null, then the [ColorScheme.onSecondary] color of [ThemeData.colorScheme]
  /// is used.
245 246
  ///
  /// Although the color of theme's `accentIconTheme` currently provides a
247
  /// default that supersedes the `onSecondary` color, this dependency
248 249
  /// has been deprecated:  https://flutter.dev/go/remove-fab-accent-theme-dependency.
  /// It will be removed in the future.
250
  final Color? foregroundColor;
251

252
  /// The button's background color.
253
  ///
254 255 256
  /// If this property is null, then the
  /// [FloatingActionButtonThemeData.backgroundColor] of
  /// [ThemeData.floatingActionButtonTheme] is used. If that property is also
257
  /// null, then the [Theme]'s [ColorScheme.secondary] color is used.
258
  final Color? backgroundColor;
259

260 261 262
  /// The color to use for filling the button when the button has input focus.
  ///
  /// Defaults to [ThemeData.focusColor] for the current theme.
263
  final Color? focusColor;
264 265 266 267 268

  /// The color to use for filling the button when the button has a pointer
  /// hovering over it.
  ///
  /// Defaults to [ThemeData.hoverColor] for the current theme.
269
  final Color? hoverColor;
270

271 272 273 274
  /// The splash color for this [FloatingActionButton]'s [InkWell].
  ///
  /// If null, [FloatingActionButtonThemeData.splashColor] is used, if that is
  /// null, [ThemeData.splashColor] is used.
275
  final Color? splashColor;
276

277 278 279
  /// The tag to apply to the button's [Hero] widget.
  ///
  /// Defaults to a tag that matches other floating action buttons.
280 281 282 283 284 285 286 287 288
  ///
  /// Set this to null explicitly if you don't want the floating action button to
  /// have a hero tag.
  ///
  /// If this is not explicitly set, then there can only be one
  /// [FloatingActionButton] per route (that is, per screen), since otherwise
  /// there would be a tag conflict (multiple heroes on one route can't have the
  /// same tag). The material design specification recommends only using one
  /// floating action button per screen.
289
  final Object? heroTag;
290

291
  /// The callback that is called when the button is tapped or otherwise activated.
292 293
  ///
  /// If this is set to null, the button will be disabled.
294
  final VoidCallback? onPressed;
295

296
  /// {@macro flutter.material.RawMaterialButton.mouseCursor}
297
  final MouseCursor? mouseCursor;
298

299
  /// The z-coordinate at which to place this button relative to its parent.
300
  ///
301 302 303 304
  /// This controls the size of the shadow below the floating action button.
  ///
  /// Defaults to 6, the appropriate elevation for floating action buttons. The
  /// value is always non-negative.
305 306 307 308 309
  ///
  /// See also:
  ///
  ///  * [highlightElevation], the elevation when the button is pressed.
  ///  * [disabledElevation], the elevation when the button is disabled.
310
  final double? elevation;
311

312 313 314 315 316 317 318 319 320 321 322 323 324
  /// The z-coordinate at which to place this button relative to its parent when
  /// the button has the input focus.
  ///
  /// This controls the size of the shadow below the floating action button.
  ///
  /// Defaults to 8, the appropriate elevation for floating action buttons
  /// while they have focus. The value is always non-negative.
  ///
  /// See also:
  ///
  ///  * [elevation], the default elevation.
  ///  * [highlightElevation], the elevation when the button is pressed.
  ///  * [disabledElevation], the elevation when the button is disabled.
325
  final double? focusElevation;
326 327 328 329 330 331 332 333 334 335 336 337 338 339

  /// The z-coordinate at which to place this button relative to its parent when
  /// the button is enabled and has a pointer hovering over it.
  ///
  /// This controls the size of the shadow below the floating action button.
  ///
  /// Defaults to 8, the appropriate elevation for floating action buttons while
  /// they have a pointer hovering over them. The value is always non-negative.
  ///
  /// See also:
  ///
  ///  * [elevation], the default elevation.
  ///  * [highlightElevation], the elevation when the button is pressed.
  ///  * [disabledElevation], the elevation when the button is disabled.
340
  final double? hoverElevation;
341

342 343 344 345
  /// The z-coordinate at which to place this button relative to its parent when
  /// the user is touching the button.
  ///
  /// This controls the size of the shadow below the floating action button.
346 347
  ///
  /// Defaults to 12, the appropriate elevation for floating action buttons
348
  /// while they are being touched. The value is always non-negative.
349 350 351 352
  ///
  /// See also:
  ///
  ///  * [elevation], the default elevation.
353
  final double? highlightElevation;
354

355 356 357 358 359 360
  /// The z-coordinate at which to place this button when the button is disabled
  /// ([onPressed] is null).
  ///
  /// This controls the size of the shadow below the floating action button.
  ///
  /// Defaults to the same value as [elevation]. Setting this to zero makes the
361
  /// floating action button work similar to an [ElevatedButton] but the titular
362 363 364 365 366 367
  /// "floating" effect is lost. The value is always non-negative.
  ///
  /// See also:
  ///
  ///  * [elevation], the default elevation.
  ///  * [highlightElevation], the elevation when the button is pressed.
368
  final double? disabledElevation;
369

370 371 372 373
  /// Controls the size of this button.
  ///
  /// By default, floating action buttons are non-mini and have a height and
  /// width of 56.0 logical pixels. Mini floating action buttons have a height
374
  /// and width of 40.0 logical pixels with a layout width and height of 48.0
375 376 377
  /// logical pixels. (The extra 4 pixels of padding on each side are added as a
  /// result of the floating action button having [MaterialTapTargetSize.padded]
  /// set on the underlying [RawMaterialButton.materialTapTargetSize].)
Devon Carew's avatar
Devon Carew committed
378
  final bool mini;
379

380 381 382 383 384
  /// The shape of the button's [Material].
  ///
  /// The button's highlight and splash are clipped to this shape. If the
  /// button has an elevation, then its drop shadow is defined by this
  /// shape as well.
385
  final ShapeBorder? shape;
386

387
  /// {@macro flutter.material.Material.clipBehavior}
388 389
  ///
  /// Defaults to [Clip.none], and must not be null.
390 391
  final Clip clipBehavior;

392 393 394 395 396 397 398 399 400 401 402
  /// True if this is an "extended" floating action button.
  ///
  /// Typically [extended] buttons have a [StadiumBorder] [shape]
  /// and have been created with the [FloatingActionButton.extended]
  /// constructor.
  ///
  /// The [Scaffold] animates the appearance of ordinary floating
  /// action buttons with scale and rotation transitions. Extended
  /// floating action buttons are scaled and faded in.
  final bool isExtended;

403
  /// {@macro flutter.widgets.Focus.focusNode}
404
  final FocusNode? focusNode;
405

406 407 408
  /// {@macro flutter.widgets.Focus.autofocus}
  final bool autofocus;

409 410 411 412 413 414
  /// Configures the minimum size of the tap target.
  ///
  /// Defaults to [ThemeData.materialTapTargetSize].
  ///
  /// See also:
  ///
415
  ///  * [MaterialTapTargetSize], for a description of how this affects tap targets.
416
  final MaterialTapTargetSize? materialTapTargetSize;
417

418 419
  final BoxConstraints _sizeConstraints;

420
  static const double _defaultElevation = 6;
421 422
  static const double _defaultFocusElevation = 6;
  static const double _defaultHoverElevation = 8;
423 424 425 426
  static const double _defaultHighlightElevation = 12;
  static const ShapeBorder _defaultShape = CircleBorder();
  static const ShapeBorder _defaultExtendedShape = StadiumBorder();

427
  @override
428
  Widget build(BuildContext context) {
429
    final ThemeData theme = Theme.of(context);
430 431
    final FloatingActionButtonThemeData floatingActionButtonTheme = theme.floatingActionButtonTheme;

432 433 434 435 436 437 438 439 440 441 442 443 444
    // Applications should no longer use accentIconTheme's color to configure
    // the foreground color of floating action buttons. For more information, see
    // https://flutter.dev/go/remove-fab-accent-theme-dependency.
    if (this.foregroundColor == null && floatingActionButtonTheme.foregroundColor == null) {
      final bool accentIsDark = theme.accentColorBrightness == Brightness.dark;
      final Color defaultAccentIconThemeColor = accentIsDark ? Colors.white : Colors.black;
      if (theme.accentIconTheme.color != defaultAccentIconThemeColor) {
        debugPrint(
          'Warning: '
          'The support for configuring the foreground color of '
          'FloatingActionButtons using ThemeData.accentIconTheme '
          'has been deprecated. Please use ThemeData.floatingActionButtonTheme '
          'instead. See '
445
          'https://flutter.dev/go/remove-fab-accent-theme-dependency. '
446 447 448 449 450
          'This feature was deprecated after v1.13.2.'
        );
      }
    }

451 452 453
    final Color foregroundColor = this.foregroundColor
      ?? floatingActionButtonTheme.foregroundColor
      ?? theme.colorScheme.onSecondary;
454 455 456 457 458 459 460 461 462
    final Color backgroundColor = this.backgroundColor
      ?? floatingActionButtonTheme.backgroundColor
      ?? theme.colorScheme.secondary;
    final Color focusColor = this.focusColor
      ?? floatingActionButtonTheme.focusColor
      ?? theme.focusColor;
    final Color hoverColor = this.hoverColor
      ?? floatingActionButtonTheme.hoverColor
      ?? theme.hoverColor;
463 464 465
    final Color splashColor = this.splashColor
      ?? floatingActionButtonTheme.splashColor
      ?? theme.splashColor;
466 467 468
    final double elevation = this.elevation
      ?? floatingActionButtonTheme.elevation
      ?? _defaultElevation;
469 470 471 472 473 474
    final double focusElevation = this.focusElevation
      ?? floatingActionButtonTheme.focusElevation
      ?? _defaultFocusElevation;
    final double hoverElevation = this.hoverElevation
      ?? floatingActionButtonTheme.hoverElevation
      ?? _defaultHoverElevation;
475 476 477 478 479 480 481 482
    final double disabledElevation = this.disabledElevation
      ?? floatingActionButtonTheme.disabledElevation
      ?? elevation;
    final double highlightElevation = this.highlightElevation
      ?? floatingActionButtonTheme.highlightElevation
      ?? _defaultHighlightElevation;
    final MaterialTapTargetSize materialTapTargetSize = this.materialTapTargetSize
      ?? theme.materialTapTargetSize;
483
    final TextStyle textStyle = theme.textTheme.button!.copyWith(
484 485 486 487 488 489 490
      color: foregroundColor,
      letterSpacing: 1.2,
    );
    final ShapeBorder shape = this.shape
      ?? floatingActionButtonTheme.shape
      ?? (isExtended ? _defaultExtendedShape : _defaultShape);

491
    Widget result = RawMaterialButton(
492
      onPressed: onPressed,
493
      mouseCursor: mouseCursor,
494
      elevation: elevation,
495 496
      focusElevation: focusElevation,
      hoverElevation: hoverElevation,
497 498 499
      highlightElevation: highlightElevation,
      disabledElevation: disabledElevation,
      constraints: _sizeConstraints,
500 501
      materialTapTargetSize: materialTapTargetSize,
      fillColor: backgroundColor,
502 503
      focusColor: focusColor,
      hoverColor: hoverColor,
504
      splashColor: splashColor,
505
      textStyle: textStyle,
506
      shape: shape,
507
      clipBehavior: clipBehavior,
508
      focusNode: focusNode,
509
      autofocus: autofocus,
510
      child: child,
511 512
    );

513
    if (tooltip != null) {
514
      result = Tooltip(
515
        message: tooltip!,
516
        child: result,
517 518 519
      );
    }

520
    if (heroTag != null) {
521
      result = Hero(
522
        tag: heroTag!,
523 524 525 526
        child: result,
      );
    }

527
    return MergeSemantics(child: result);
528
  }
529 530 531 532 533 534

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(ObjectFlagProperty<VoidCallback>('onPressed', onPressed, ifNull: 'disabled'));
    properties.add(StringProperty('tooltip', tooltip, defaultValue: null));
535 536 537 538
    properties.add(ColorProperty('foregroundColor', foregroundColor, defaultValue: null));
    properties.add(ColorProperty('backgroundColor', backgroundColor, defaultValue: null));
    properties.add(ColorProperty('focusColor', focusColor, defaultValue: null));
    properties.add(ColorProperty('hoverColor', hoverColor, defaultValue: null));
539
    properties.add(ColorProperty('splashColor', splashColor, defaultValue: null));
540
    properties.add(ObjectFlagProperty<Object>('heroTag', heroTag, ifPresent: 'hero'));
541 542 543 544 545
    properties.add(DoubleProperty('elevation', elevation, defaultValue: null));
    properties.add(DoubleProperty('focusElevation', focusElevation, defaultValue: null));
    properties.add(DoubleProperty('hoverElevation', hoverElevation, defaultValue: null));
    properties.add(DoubleProperty('highlightElevation', highlightElevation, defaultValue: null));
    properties.add(DoubleProperty('disabledElevation', disabledElevation, defaultValue: null));
546 547 548 549 550
    properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
    properties.add(DiagnosticsProperty<FocusNode>('focusNode', focusNode, defaultValue: null));
    properties.add(FlagProperty('isExtended', value: isExtended, ifTrue: 'extended'));
    properties.add(DiagnosticsProperty<MaterialTapTargetSize>('materialTapTargetSize', materialTapTargetSize, defaultValue: null));
  }
551
}
552 553 554 555 556 557 558 559

// This widget's size matches its child's size unless its constraints
// force it to be larger or smaller. The child is centered.
//
// Used to encapsulate extended FABs whose size is fixed, using Row
// and MainAxisSize.min, to be as wide as their label and icon.
class _ChildOverflowBox extends SingleChildRenderObjectWidget {
  const _ChildOverflowBox({
560 561
    Key? key,
    Widget? child,
562 563 564 565
  }) : super(key: key, child: child);

  @override
  _RenderChildOverflowBox createRenderObject(BuildContext context) {
566
    return _RenderChildOverflowBox(
567 568 569 570 571 572
      textDirection: Directionality.of(context),
    );
  }

  @override
  void updateRenderObject(BuildContext context, _RenderChildOverflowBox renderObject) {
573
    renderObject.textDirection = Directionality.of(context);
574 575 576 577 578
  }
}

class _RenderChildOverflowBox extends RenderAligningShiftedBox {
  _RenderChildOverflowBox({
579 580
    RenderBox? child,
    TextDirection? textDirection,
581 582 583 584 585 586 587 588
  }) : super(child: child, alignment: Alignment.center, textDirection: textDirection);

  @override
  double computeMinIntrinsicWidth(double height) => 0.0;

  @override
  double computeMinIntrinsicHeight(double width) => 0.0;

589 590 591 592 593 594 595 596 597 598 599 600 601
  @override
  Size computeDryLayout(BoxConstraints constraints) {
    if (child != null) {
      final Size childSize = child!.getDryLayout(const BoxConstraints());
      return Size(
        math.max(constraints.minWidth, math.min(constraints.maxWidth, childSize.width)),
        math.max(constraints.minHeight, math.min(constraints.maxHeight, childSize.height)),
      );
    } else {
      return constraints.biggest;
    }
  }

602 603
  @override
  void performLayout() {
604
    final BoxConstraints constraints = this.constraints;
605
    if (child != null) {
606
      child!.layout(const BoxConstraints(), parentUsesSize: true);
607
      size = Size(
608 609
        math.max(constraints.minWidth, math.min(constraints.maxWidth, child!.size.width)),
        math.max(constraints.minHeight, math.min(constraints.maxHeight, child!.size.height)),
610 611 612 613 614 615 616
      );
      alignChild();
    } else {
      size = constraints.biggest;
    }
  }
}