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

import 'dart:math' as math;

import 'basic.dart';
8
import 'debug.dart';
9 10 11 12 13 14
import 'framework.dart';

/// [NavigationToolbar] is a layout helper to position 3 widgets or groups of
/// widgets along a horizontal axis that's sensible for an application's
/// navigation bar such as in Material Design and in iOS.
///
15
/// The [leading] and [trailing] widgets occupy the edges of the widget with
16 17 18 19 20 21 22
/// reasonable size constraints while the [middle] widget occupies the remaining
/// space in either a center aligned or start aligned fashion.
///
/// Either directly use the themed app bars such as the Material [AppBar] or
/// the iOS [CupertinoNavigationBar] or wrap this widget with more theming
/// specifications for your own custom app bar.
class NavigationToolbar extends StatelessWidget {
23

24 25
  /// Creates a widget that lays out its children in a manner suitable for a
  /// toolbar.
26
  const NavigationToolbar({
27
    super.key,
28 29 30
    this.leading,
    this.middle,
    this.trailing,
31 32
    this.centerMiddle = true,
    this.middleSpacing = kMiddleSpacing,
33
  }) : assert(centerMiddle != null),
34
       assert(middleSpacing != null);
35

36 37 38
  /// The default spacing around the [middle] widget in dp.
  static const double kMiddleSpacing = 16.0;

39
  /// Widget to place at the start of the horizontal toolbar.
40
  final Widget? leading;
41 42 43

  /// Widget to place in the middle of the horizontal toolbar, occupying
  /// as much remaining space as possible.
44
  final Widget? middle;
45 46

  /// Widget to place at the end of the horizontal toolbar.
47
  final Widget? trailing;
48 49 50 51 52

  /// Whether to align the [middle] widget to the center of this widget or
  /// next to the [leading] widget when false.
  final bool centerMiddle;

53 54 55 56 57
  /// The spacing around the [middle] widget on horizontal axis.
  ///
  /// Defaults to [kMiddleSpacing].
  final double middleSpacing;

58 59
  @override
  Widget build(BuildContext context) {
60
    assert(debugCheckHasDirectionality(context));
61
    final TextDirection textDirection = Directionality.of(context);
62 63
    return CustomMultiChildLayout(
      delegate: _ToolbarLayout(
64
        centerMiddle: centerMiddle,
65
        middleSpacing: middleSpacing,
66
        textDirection: textDirection,
67
      ),
68
      children: <Widget>[
69 70 71
        if (leading != null) LayoutId(id: _ToolbarSlot.leading, child: leading!),
        if (middle != null) LayoutId(id: _ToolbarSlot.middle, child: middle!),
        if (trailing != null) LayoutId(id: _ToolbarSlot.trailing, child: trailing!),
72
      ],
73 74 75 76 77 78 79 80 81 82 83
    );
  }
}

enum _ToolbarSlot {
  leading,
  middle,
  trailing,
}

class _ToolbarLayout extends MultiChildLayoutDelegate {
84
  _ToolbarLayout({
85 86 87
    required this.centerMiddle,
    required this.middleSpacing,
    required this.textDirection,
88 89
  }) : assert(middleSpacing != null),
       assert(textDirection != null);
90

91
  // If false the middle widget should be start-justified within the space
92 93
  // between the leading and trailing widgets.
  // If true the middle widget is centered within the toolbar (not within the horizontal
94
  // space between the leading and trailing widgets).
95 96
  final bool centerMiddle;

97 98 99
  /// The spacing around middle widget on horizontal axis.
  final double middleSpacing;

100 101
  final TextDirection textDirection;

102 103 104 105 106 107
  @override
  void performLayout(Size size) {
    double leadingWidth = 0.0;
    double trailingWidth = 0.0;

    if (hasChild(_ToolbarSlot.leading)) {
108
      final BoxConstraints constraints = BoxConstraints(
109
        maxWidth: size.width,
110 111 112 113
        minHeight: size.height, // The height should be exactly the height of the bar.
        maxHeight: size.height,
      );
      leadingWidth = layoutChild(_ToolbarSlot.leading, constraints).width;
114
      final double leadingX;
115 116 117 118 119 120 121 122
      switch (textDirection) {
        case TextDirection.rtl:
          leadingX = size.width - leadingWidth;
          break;
        case TextDirection.ltr:
          leadingX = 0.0;
          break;
      }
123
      positionChild(_ToolbarSlot.leading, Offset(leadingX, 0.0));
124 125 126
    }

    if (hasChild(_ToolbarSlot.trailing)) {
127
      final BoxConstraints constraints = BoxConstraints.loose(size);
128
      final Size trailingSize = layoutChild(_ToolbarSlot.trailing, constraints);
129
      final double trailingX;
130 131 132 133 134 135 136 137 138
      switch (textDirection) {
        case TextDirection.rtl:
          trailingX = 0.0;
          break;
        case TextDirection.ltr:
          trailingX = size.width - trailingSize.width;
          break;
      }
      final double trailingY = (size.height - trailingSize.height) / 2.0;
139
      trailingWidth = trailingSize.width;
140
      positionChild(_ToolbarSlot.trailing, Offset(trailingX, trailingY));
141 142 143
    }

    if (hasChild(_ToolbarSlot.middle)) {
144
      final double maxWidth = math.max(size.width - leadingWidth - trailingWidth - middleSpacing * 2.0, 0.0);
145
      final BoxConstraints constraints = BoxConstraints.loose(size).copyWith(maxWidth: maxWidth);
146 147
      final Size middleSize = layoutChild(_ToolbarSlot.middle, constraints);

148
      final double middleStartMargin = leadingWidth + middleSpacing;
149
      double middleStart = middleStartMargin;
150 151 152 153
      final double middleY = (size.height - middleSize.height) / 2.0;
      // If the centered middle will not fit between the leading and trailing
      // widgets, then align its left or right edge with the adjacent boundary.
      if (centerMiddle) {
154
        middleStart = (size.width - middleSize.width) / 2.0;
155
        if (middleStart + middleSize.width > size.width - trailingWidth) {
156
          middleStart = size.width - trailingWidth - middleSize.width - middleSpacing;
157
        } else if (middleStart < middleStartMargin) {
158
          middleStart = middleStartMargin;
159
        }
160 161
      }

162
      final double middleX;
163 164 165 166 167 168 169
      switch (textDirection) {
        case TextDirection.rtl:
          middleX = size.width - middleSize.width - middleStart;
          break;
        case TextDirection.ltr:
          middleX = middleStart;
          break;
170 171
      }

172
      positionChild(_ToolbarSlot.middle, Offset(middleX, middleY));
173 174 175 176
    }
  }

  @override
177 178
  bool shouldRelayout(_ToolbarLayout oldDelegate) {
    return oldDelegate.centerMiddle != centerMiddle
179
        || oldDelegate.middleSpacing != middleSpacing
180 181
        || oldDelegate.textDirection != textDirection;
  }
182
}