grid_paper.dart 4 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 8 9
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/rendering.dart';

import 'basic.dart';
import 'framework.dart';

10 11 12
class _GridPaperPainter extends CustomPainter {
  const _GridPaperPainter({
    this.color,
Ian Hickson's avatar
Ian Hickson committed
13 14
    this.interval,
    this.divisions,
15
    this.subdivisions,
16 17 18 19
  });

  final Color color;
  final double interval;
Ian Hickson's avatar
Ian Hickson committed
20
  final int divisions;
21
  final int subdivisions;
22

23
  @override
24
  void paint(Canvas canvas, Size size) {
25
    final Paint linePaint = Paint()
26
      ..color = color;
27
    final double allDivisions = (divisions * subdivisions).toDouble();
Ian Hickson's avatar
Ian Hickson committed
28
    for (double x = 0.0; x <= size.width; x += interval / allDivisions) {
29
      linePaint.strokeWidth = (x % interval == 0.0) ? 1.0 : (x % (interval / subdivisions) == 0.0) ? 0.5 : 0.25;
30
      canvas.drawLine(Offset(x, 0.0), Offset(x, size.height), linePaint);
31
    }
Ian Hickson's avatar
Ian Hickson committed
32
    for (double y = 0.0; y <= size.height; y += interval / allDivisions) {
33
      linePaint.strokeWidth = (y % interval == 0.0) ? 1.0 : (y % (interval / subdivisions) == 0.0) ? 0.5 : 0.25;
34
      canvas.drawLine(Offset(0.0, y), Offset(size.width, y), linePaint);
35 36 37
    }
  }

38
  @override
39 40
  bool shouldRepaint(_GridPaperPainter oldPainter) {
    return oldPainter.color != color
Ian Hickson's avatar
Ian Hickson committed
41 42
        || oldPainter.interval != interval
        || oldPainter.divisions != divisions
43
        || oldPainter.subdivisions != subdivisions;
44
  }
Ian Hickson's avatar
Ian Hickson committed
45

46
  @override
47
  bool hitTest(Offset position) => false;
48 49
}

50
/// A widget that draws a rectilinear grid of lines one pixel wide.
51 52
///
/// Useful with a [Stack] for visualizing your layout along a grid.
53 54 55 56 57
///
/// The grid's origin (where the first primary horizontal line and the first
/// primary vertical line intersect) is at the top left of the widget.
///
/// The grid is drawn over the [child] widget.
58
class GridPaper extends StatelessWidget {
59
  /// Creates a widget that draws a rectilinear grid of 1-pixel-wide lines.
60
  const GridPaper({
61
    Key key,
62 63 64 65
    this.color = const Color(0x7FC3E8F3),
    this.interval = 100.0,
    this.divisions = 2,
    this.subdivisions = 5,
66 67 68 69
    this.child,
  }) : assert(divisions > 0, 'The "divisions" property must be greater than zero. If there were no divisions, the grid paper would not paint anything.'),
       assert(subdivisions > 0, 'The "subdivisions" property must be greater than zero. If there were no subdivisions, the grid paper would not paint anything.'),
       super(key: key);
70

71
  /// The color to draw the lines in the grid.
72
  ///
73
  /// Defaults to a light blue commonly seen on traditional grid paper.
74
  final Color color;
75 76

  /// The distance between the primary lines in the grid, in logical pixels.
77 78
  ///
  /// Each primary line is one logical pixel wide.
79
  final double interval;
80 81

  /// The number of major divisions within each primary grid cell.
82 83 84 85 86 87 88 89 90 91
  ///
  /// This is the number of major divisions per [interval], including the
  /// primary grid's line.
  ///
  /// The lines after the first are half a logical pixel wide.
  ///
  /// If this is set to 2 (the default), then for each [interval] there will be
  /// a 1-pixel line on the left, a half-pixel line in the middle, and a 1-pixel
  /// line on the right (the latter being the 1-pixel line on the left of the
  /// next [interval]).
Ian Hickson's avatar
Ian Hickson committed
92
  final int divisions;
93

94 95 96 97 98 99 100 101
  /// The number of minor divisions within each major division, including the
  /// major division itself.
  ///
  /// If [subdivisions] is 5 (the default), it means that there will be four
  /// lines between each major ([divisions]) line.
  ///
  /// The subdivision lines after the first are a quarter of a logical pixel wide.
  final int subdivisions;
102

103
  /// The widget below this widget in the tree.
104 105
  ///
  /// {@macro flutter.widgets.child}
Ian Hickson's avatar
Ian Hickson committed
106
  final Widget child;
107

108
  @override
109
  Widget build(BuildContext context) {
110 111
    return CustomPaint(
      foregroundPainter: _GridPaperPainter(
Ian Hickson's avatar
Ian Hickson committed
112 113 114
        color: color,
        interval: interval,
        divisions: divisions,
115
        subdivisions: subdivisions,
Ian Hickson's avatar
Ian Hickson committed
116
      ),
117
      child: child,
118 119 120
    );
  }
}