dialog.dart 8.79 KB
Newer Older
1 2 3 4
// Copyright 2017 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.

xster's avatar
xster committed
5
import 'dart:ui' show ImageFilter;
xster's avatar
xster committed
6
import 'package:flutter/foundation.dart';
7 8
import 'package:flutter/widgets.dart';

xster's avatar
xster committed
9 10
import 'colors.dart';

11 12 13 14 15
// TODO(abarth): These constants probably belong somewhere more general.

const TextStyle _kCupertinoDialogTitleStyle = const TextStyle(
  fontFamily: '.SF UI Display',
  inherit: false,
xster's avatar
xster committed
16
  fontSize:  17.5,
17
  fontWeight: FontWeight.w600,
xster's avatar
xster committed
18
  color: CupertinoColors.black,
xster's avatar
xster committed
19
  height: 1.25,
20 21 22 23 24 25
  textBaseline: TextBaseline.alphabetic,
);

const TextStyle _kCupertinoDialogContentStyle = const TextStyle(
  fontFamily: '.SF UI Text',
  inherit: false,
xster's avatar
xster committed
26 27
  fontSize:  12.4,
  fontWeight: FontWeight.w500,
xster's avatar
xster committed
28
  color: CupertinoColors.black,
29 30 31 32 33 34 35
  height: 1.35,
  textBaseline: TextBaseline.alphabetic,
);

const TextStyle _kCupertinoDialogActionStyle = const TextStyle(
  fontFamily: '.SF UI Text',
  inherit: false,
xster's avatar
xster committed
36
  fontSize:  16.8,
37
  fontWeight: FontWeight.w400,
xster's avatar
xster committed
38
  color: CupertinoColors.activeBlue,
39 40 41 42
  textBaseline: TextBaseline.alphabetic,
);

const double _kCupertinoDialogWidth = 270.0;
xster's avatar
xster committed
43 44 45 46 47
const BoxDecoration _kCupertinoDialogFrontFillDecoration = const BoxDecoration(
  color: const Color(0xCCFFFFFF),
);
const BoxDecoration _kCupertinoDialogBackFill = const BoxDecoration(
  color: const Color(0x77FFFFFFF),
48 49 50 51 52 53 54 55
);

/// An iOS-style dialog.
///
/// This dialog widget does not have any opinion about the contents of the
/// dialog. Rather than using this widget directly, consider using
/// [CupertinoAlertDialog], which implement a specific kind of dialog.
///
56 57 58
/// Push with `Navigator.of(..., rootNavigator: true)` when using with
/// [CupertinoTabScaffold] to ensure that the dialog appears above the tabs.
///
59 60 61 62
/// See also:
///
///  * [CupertinoAlertDialog], which is a dialog with title, contents, and
///    actions.
63
///  * <https://developer.apple.com/ios/human-interface-guidelines/views/alerts/>
64 65
class CupertinoDialog extends StatelessWidget {
  /// Creates an iOS-style dialog.
66
  const CupertinoDialog({
67 68 69 70 71 72 73 74 75 76
    Key key,
    this.child,
  }) : super(key: key);

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

  @override
  Widget build(BuildContext context) {
    return new Center(
xster's avatar
xster committed
77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
      child: new ClipRRect(
        borderRadius: const BorderRadius.all(const Radius.circular(12.0)),
        child: new DecoratedBox(
          // To get the effect, 2 white fills are needed. One blended with the
          // background before applying the blur and one overlayed on top of
          // the blur.
          decoration: _kCupertinoDialogBackFill,
          child: new BackdropFilter(
            filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: new Container(
              width: _kCupertinoDialogWidth,
              decoration: _kCupertinoDialogFrontFillDecoration,
              child: child,
            ),
          ),
        ),
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
      ),
    );
  }
}

/// An iOS-style alert dialog.
///
/// An alert dialog informs the user about situations that require
/// acknowledgement. An alert dialog has an optional title and an optional list
/// of actions. The title is displayed above the content and the actions are
/// displayed below the content.
///
/// Typically passed as the child widget to [showDialog], which displays the
/// dialog.
///
/// See also:
///
///  * [CupertinoDialog], which is a generic iOS-style dialog.
111
///  * <https://developer.apple.com/ios/human-interface-guidelines/views/alerts/>
112 113
class CupertinoAlertDialog extends StatelessWidget {
  /// Creates an iOS-style alert dialog.
114
  const CupertinoAlertDialog({
115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
    Key key,
    this.title,
    this.content,
    this.actions,
  }) : super(key: key);

  /// The (optional) title of the dialog is displayed in a large font at the top
  /// of the dialog.
  ///
  /// Typically a [Text] widget.
  final Widget title;

  /// The (optional) content of the dialog is displayed in the center of the
  /// dialog in a lighter font.
  ///
  /// Typically a [Text] widget.
  final Widget content;

  /// The (optional) set of actions that are displayed at the bottom of the
  /// dialog.
  ///
  /// Typically this is a list of [CupertinoDialogAction] widgets.
  final List<Widget> actions;

  @override
  Widget build(BuildContext context) {
    final List<Widget> children = <Widget>[];

xster's avatar
xster committed
143
    children.add(const SizedBox(height: 18.0));
144 145 146

    if (title != null) {
      children.add(new Padding(
xster's avatar
xster committed
147
        padding: const EdgeInsets.only(left: 20.0, right: 20.0, bottom: 2.0),
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
        child: new DefaultTextStyle(
          style: _kCupertinoDialogTitleStyle,
          textAlign: TextAlign.center,
          child: title,
        ),
      ));
    }

    if (content != null) {
      children.add(new Flexible(
        fit: FlexFit.loose,
        child: new Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          child: new DefaultTextStyle(
            style: _kCupertinoDialogContentStyle,
            textAlign: TextAlign.center,
            child: content,
          ),
        ),
      ));
    }

xster's avatar
xster committed
170
    children.add(const SizedBox(height: 22.0));
171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192

    if (actions != null) {
      children.add(new _CupertinoButtonBar(
        children: actions,
      ));
    }

    return new CupertinoDialog(
      child: new Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: children,
      ),
    );
  }
}


/// A button typically used in a [CupertinoAlertDialog].
///
/// See also:
///
193 194
///  * [CupertinoAlertDialog], a dialog that informs the user about situations
///    that require acknowledgement
195 196
class CupertinoDialogAction extends StatelessWidget {
  /// Creates an action for an iOS-style dialog.
197
  const CupertinoDialogAction({
198
    this.onPressed,
199 200
    this.isDefaultAction: false,
    this.isDestructiveAction: false,
201
    @required this.child,
202
  }) : assert(child != null);
203 204 205 206 207 208

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

209 210 211 212 213
  /// Set to true if button is the default choice in the dialog.
  ///
  /// Default buttons are bolded.
  final bool isDefaultAction;

214 215 216
  /// Whether this action destroys an object.
  ///
  /// For example, an action that deletes an email is destructive.
217
  final bool isDestructiveAction;
218 219 220 221 222 223 224 225 226 227 228 229 230 231

  /// The widget below this widget in the tree.
  ///
  /// Typically a [Text] widget.
  final Widget child;

  /// Whether the button is enabled or disabled. Buttons are disabled by default. To
  /// enable a button, set its [onPressed] property to a non-null value.
  bool get enabled => onPressed != null;

  @override
  Widget build(BuildContext context) {
    TextStyle style = _kCupertinoDialogActionStyle;

232 233 234 235
    if (isDefaultAction)
      style = style.copyWith(fontWeight: FontWeight.w600);

    if (isDestructiveAction)
xster's avatar
xster committed
236
      style = style.copyWith(color: CupertinoColors.destructiveRed);
237 238 239 240 241 242

    if (!enabled)
      style = style.copyWith(color: style.color.withOpacity(0.5));

    return new GestureDetector(
      onTap: onPressed,
243
      behavior: HitTestBehavior.opaque,
244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260
      child: new Center(
        child: new DefaultTextStyle(
          style: style,
          child: child,
        ),
      ),
    );
  }
}

const double _kButtonBarHeight = 45.0;

// This color isn't correct. Instead, we should carve a hole in the dialog and
// show more of the background.
const Color _kButtonDividerColor = const Color(0xFFD5D5D5);

class _CupertinoButtonBar extends StatelessWidget {
261
  const _CupertinoButtonBar({
262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299
    Key key,
    this.children,
  }) : super(key: key);

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    final List<Widget> buttons = <Widget>[];

    for (Widget child in children) {
      // TODO(abarth): Listen for the buttons being highlighted.
      buttons.add(new Expanded(child: child));
    }

    return new CustomPaint(
      painter: new _CupertinoButtonBarPainter(children.length),
      child: new SizedBox(
        height: _kButtonBarHeight,
        child: new Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: buttons
        ),
      )
    );
  }
}

class _CupertinoButtonBarPainter extends CustomPainter {
  _CupertinoButtonBarPainter(this.count);

  final int count;

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = new Paint()
      ..color = _kButtonDividerColor;

300
    canvas.drawLine(Offset.zero, new Offset(size.width, 0.0), paint);
301 302 303 304
    for (int i = 1; i < count; ++i) {
      // TODO(abarth): Hide the divider when one of the adjacent buttons is
      // highlighted.
      final double x = size.width * i / count;
305
      canvas.drawLine(new Offset(x, 0.0), new Offset(x, size.height), paint);
306 307 308 309 310 311
    }
  }

  @override
  bool shouldRepaint(_CupertinoButtonBarPainter other) => count != other.count;
}