navigation_toolbar.dart 5.99 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
  });
34

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

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

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

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

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

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

57 58
  @override
  Widget build(BuildContext context) {
59
    assert(debugCheckHasDirectionality(context));
60
    final TextDirection textDirection = Directionality.of(context);
61 62
    return CustomMultiChildLayout(
      delegate: _ToolbarLayout(
63
        centerMiddle: centerMiddle,
64
        middleSpacing: middleSpacing,
65
        textDirection: textDirection,
66
      ),
67
      children: <Widget>[
68 69 70
        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!),
71
      ],
72 73 74 75 76 77 78 79 80 81 82
    );
  }
}

enum _ToolbarSlot {
  leading,
  middle,
  trailing,
}

class _ToolbarLayout extends MultiChildLayoutDelegate {
83
  _ToolbarLayout({
84 85 86
    required this.centerMiddle,
    required this.middleSpacing,
    required this.textDirection,
87
  });
88

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

95 96 97
  /// The spacing around middle widget on horizontal axis.
  final double middleSpacing;

98 99
  final TextDirection textDirection;

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

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

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

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

142
      final double middleStartMargin = leadingWidth + middleSpacing;
143
      double middleStart = middleStartMargin;
144 145 146 147
      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) {
148
        middleStart = (size.width - middleSize.width) / 2.0;
149
        if (middleStart + middleSize.width > size.width - trailingWidth) {
150
          middleStart = size.width - trailingWidth - middleSize.width - middleSpacing;
151
        } else if (middleStart < middleStartMargin) {
152
          middleStart = middleStartMargin;
153
        }
154 155
      }

156
      final double middleX;
157 158 159 160 161
      switch (textDirection) {
        case TextDirection.rtl:
          middleX = size.width - middleSize.width - middleStart;
        case TextDirection.ltr:
          middleX = middleStart;
162 163
      }

164
      positionChild(_ToolbarSlot.middle, Offset(middleX, middleY));
165 166 167 168
    }
  }

  @override
169 170
  bool shouldRelayout(_ToolbarLayout oldDelegate) {
    return oldDelegate.centerMiddle != centerMiddle
171
        || oldDelegate.middleSpacing != middleSpacing
172 173
        || oldDelegate.textDirection != textDirection;
  }
174
}