checkbox.dart 5.64 KB
Newer Older
1 2 3 4 5 6
// Copyright 2015 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.

import 'dart:sky' as sky;

7
import 'package:sky/rendering/object.dart';
8
import 'package:sky/widgets/basic.dart';
9
import 'package:sky/widgets/theme.dart';
10
import 'package:sky/widgets/framework.dart';
11
import 'package:sky/rendering/toggleable.dart';
12

13
export 'package:sky/rendering/toggleable.dart' show ValueChanged;
14 15 16 17 18 19

const double _kMidpoint = 0.5;
const sky.Color _kLightUncheckedColor = const sky.Color(0x8A000000);
const sky.Color _kDarkUncheckedColor = const sky.Color(0xB2FFFFFF);
const double _kEdgeSize = 20.0;
const double _kEdgeRadius = 1.0;
20
const Duration _kCheckDuration = const Duration(milliseconds: 200);
21 22 23 24 25 26 27 28 29 30

/// A material design checkbox
///
/// The checkbox itself does not maintain any state. Instead, when the state of
/// the checkbox changes, the component calls the `onChange` callback. Most
/// components that use a checkbox will listen for the `onChange` callback and
/// rebuild the checkbox with a new `value` to update the visual appearance of
/// the checkbox.
///
/// <https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls>
31
class Checkbox extends Component {
32 33 34 35
  /// Constructs a checkbox
  ///
  /// * `value` determines whether the checkbox is checked.
  /// * `onChanged` is called whenever the state of the checkbox should change.
36
  Checkbox({Key key, this.value, this.onChanged}) : super(key: key);
37

38 39
  final bool value;
  final ValueChanged onChanged;
40

41
  Widget build() {
42
    ThemeData themeData = Theme.of(this);
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
    Color uncheckedColor = themeData.brightness == ThemeBrightness.light
        ? _kLightUncheckedColor
        : _kDarkUncheckedColor;
    return new _CheckboxWrapper(
        value: value,
        onChanged: onChanged,
        uncheckedColor: uncheckedColor,
        accentColor: themeData.accentColor);
  }
}

// This wrapper class exists only because Switch needs to be a Component in
// order to get an accent color from a Theme but Components do not know how to
// host RenderObjects.
class _CheckboxWrapper extends LeafRenderObjectWrapper {
  _CheckboxWrapper({Key key, this.value, this.onChanged, this.uncheckedColor,
      this.accentColor})
      : super(key: key);

  final bool value;
  final ValueChanged onChanged;
  final Color uncheckedColor;
  final Color accentColor;

  _RenderCheckbox get root => super.root;
  _RenderCheckbox createNode() => new _RenderCheckbox(
      value: value, uncheckedColor: uncheckedColor, onChanged: onChanged);

  void syncRenderObject(_CheckboxWrapper old) {
    super.syncRenderObject(old);
    root.value = value;
    root.onChanged = onChanged;
    root.uncheckedColor = uncheckedColor;
    root.accentColor = accentColor;
  }
}

class _RenderCheckbox extends RenderToggleable {
  _RenderCheckbox({bool value, Color uncheckedColor, ValueChanged onChanged})
      : _uncheckedColor = uncheckedColor,
        super(
            value: value,
            onChanged: onChanged,
            size: new Size(_kEdgeSize, _kEdgeSize)) {}

  Color _uncheckedColor;
  Color get uncheckedColor => _uncheckedColor;

  void set uncheckedColor(Color value) {
    if (value == _uncheckedColor) return;
    _uncheckedColor = value;
    markNeedsPaint();
  }

  Color _accentColor;
  void set accentColor(Color value) {
    if (value == _accentColor) return;
    _accentColor = value;
    markNeedsPaint();
  }
103

104
  void paint(PaintingCanvas canvas, Offset offset) {
105
    // Choose a color between grey and the theme color
106 107 108
    sky.Paint paint = new sky.Paint()
      ..strokeWidth = 2.0
      ..color = uncheckedColor;
109 110 111

    // The rrect contracts slightly during the animation
    double inset = 2.0 - (position.value - _kMidpoint).abs() * 2.0;
112 113 114 115
    sky.Rect rect = new sky.Rect.fromLTWH(offset.dx + inset, offset.dy + inset,
        _kEdgeSize - inset, _kEdgeSize - inset);
    sky.RRect rrect = new sky.RRect()
      ..setRectXY(rect, _kEdgeRadius, _kEdgeRadius);
116 117 118 119 120 121 122 123

    // Outline of the empty rrect
    paint.setStyle(sky.PaintingStyle.stroke);
    canvas.drawRRect(rrect, paint);

    // Radial gradient that changes size
    if (position.value > 0) {
      paint.setStyle(sky.PaintingStyle.fill);
124
      paint.setShader(new sky.Gradient.radial(
125
          new Point(_kEdgeSize / 2.0, _kEdgeSize / 2.0),
126 127 128 129
          _kEdgeSize * (_kMidpoint - position.value) * 8.0, [
        const sky.Color(0x00000000),
        uncheckedColor
      ]));
130 131 132 133 134 135 136 137
      canvas.drawRRect(rrect, paint);
    }

    if (position.value > _kMidpoint) {
      double t = (position.value - _kMidpoint) / (1.0 - _kMidpoint);

      // Solid filled rrect
      paint.setStyle(sky.PaintingStyle.strokeAndFill);
138 139
      paint.color = new Color.fromARGB((t * 255).floor(), _accentColor.red,
          _accentColor.green, _accentColor.blue);
140 141 142 143 144 145 146 147 148
      canvas.drawRRect(rrect, paint);

      // White inner check
      paint.color = const sky.Color(0xFFFFFFFF);
      paint.setStyle(sky.PaintingStyle.stroke);
      sky.Path path = new sky.Path();
      sky.Point start = new sky.Point(_kEdgeSize * 0.2, _kEdgeSize * 0.5);
      sky.Point mid = new sky.Point(_kEdgeSize * 0.4, _kEdgeSize * 0.7);
      sky.Point end = new sky.Point(_kEdgeSize * 0.8, _kEdgeSize * 0.3);
149 150
      Point lerp(Point p1, Point p2, double t) =>
          new Point(p1.x * (1.0 - t) + p2.x * t, p1.y * (1.0 - t) + p2.y * t);
151 152
      sky.Point drawStart = lerp(start, mid, 1.0 - t);
      sky.Point drawEnd = lerp(mid, end, t);
153 154 155
      path.moveTo(offset.dx + drawStart.x, offset.dy + drawStart.y);
      path.lineTo(offset.dx + mid.x, offset.dy + mid.y);
      path.lineTo(offset.dx + drawEnd.x, offset.dy + drawEnd.y);
156 157 158 159
      canvas.drawPath(path, paint);
    }
  }
}