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

Ian Hickson's avatar
Ian Hickson committed
5 6
import 'package:flutter/foundation.dart';

7 8 9 10 11
import 'basic.dart';
import 'framework.dart';

class _PlaceholderPainter extends CustomPainter {
  const _PlaceholderPainter({
12 13
    required this.color,
    required this.strokeWidth,
14 15 16 17 18 19 20
  });

  final Color color;
  final double strokeWidth;

  @override
  void paint(Canvas canvas, Size size) {
21
    final Paint paint = Paint()
22 23 24 25
      ..color = color
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth;
    final Rect rect = Offset.zero & size;
26
    final Path path = Path()
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
      ..addRect(rect)
      ..addPolygon(<Offset>[rect.topRight, rect.bottomLeft], false)
      ..addPolygon(<Offset>[rect.topLeft, rect.bottomRight], false);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(_PlaceholderPainter oldPainter) {
    return oldPainter.color != color
        || oldPainter.strokeWidth != strokeWidth;
  }

  @override
  bool hitTest(Offset position) => false;
}

/// A widget that draws a box that represents where other widgets will one day
/// be added.
///
/// This widget is useful during development to indicate that the interface is
/// not yet complete.
///
/// By default, the placeholder is sized to fit its container. If the
/// placeholder is in an unbounded space, it will size itself according to the
/// given [fallbackWidth] and [fallbackHeight].
52 53
///
/// {@youtube 560 315 https://www.youtube.com/watch?v=LPe56fezmoo}
54 55 56
class Placeholder extends StatelessWidget {
  /// Creates a widget which draws a box.
  const Placeholder({
57
    super.key,
58 59 60 61
    this.color = const Color(0xFF455A64), // Blue Grey 700
    this.strokeWidth = 2.0,
    this.fallbackWidth = 400.0,
    this.fallbackHeight = 400.0,
62
    this.child
63
  });
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

  /// The color to draw the placeholder box.
  final Color color;

  /// The width of the lines in the placeholder box.
  final double strokeWidth;

  /// The width to use when the placeholder is in a situation with an unbounded
  /// width.
  ///
  /// See also:
  ///
  ///  * [fallbackHeight], the same but vertically.
  final double fallbackWidth;

  /// The height to use when the placeholder is in a situation with an unbounded
  /// height.
  ///
  /// See also:
  ///
  ///  * [fallbackWidth], the same but horizontally.
  final double fallbackHeight;

87 88 89 90
  /// The [child] contained by the placeholder box.
  ///
  /// Defaults to null.
  final Widget? child;
91 92
  @override
  Widget build(BuildContext context) {
93
    return LimitedBox(
94 95
      maxWidth: fallbackWidth,
      maxHeight: fallbackHeight,
96
      child: CustomPaint(
97
        size: Size.infinite,
98
        painter: _PlaceholderPainter(
99 100 101
          color: color,
          strokeWidth: strokeWidth,
        ),
102
        child: child,
103 104 105
      ),
    );
  }
Ian Hickson's avatar
Ian Hickson committed
106 107 108 109 110 111 112 113

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(ColorProperty('color', color, defaultValue: const Color(0xFF455A64)));
    properties.add(DoubleProperty('strokeWidth', strokeWidth, defaultValue: 2.0));
    properties.add(DoubleProperty('fallbackWidth', fallbackWidth, defaultValue: 400.0));
    properties.add(DoubleProperty('fallbackHeight', fallbackHeight, defaultValue: 400.0));
114
    properties.add(DiagnosticsProperty<Widget>('child', child, defaultValue: null));
Ian Hickson's avatar
Ian Hickson committed
115
  }
116
}