intrinsics and savelayer changes to sloth_app

gray.dart

import 'package:flutter/material.dart';

class GrayPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [Colors.blueAccent, Colors.blueGrey],
        ),
      ),
    );
  }
}

class LightGrayPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [Colors.black12, Colors.grey],
        ),
      ),
      child: IntrinsicHeight(
        child: Column(
          children: [
            Container(
              height: 100,
              width: 100,
              color: Colors.green,
              child: WidgetThatCallsSaveLayer(
                text: 'b1',
                isRoot: true,
                onPressed: () {},
              ),
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.blue,
            ),
            Expanded(
              child: GridView.count(
                crossAxisCount: 4,
                children: List.generate(20, (index) {
                  return Card(
                    child: Text(
                      '$index',
                      style: Theme.of(context).textTheme.headline5,
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class WidgetThatCallsSaveLayer extends StatelessWidget {
  const WidgetThatCallsSaveLayer({
    @required this.text,
    @required this.isRoot,
    @required this.onPressed,
  });

  static const height = 28.0;

  static const caretWidth = 4.0;

  final String text;

  final bool isRoot;

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    // Create the text painter here so that we can calculate `breadcrumbWidth`.
    // We need the width for the wrapping Container that gives the CustomPaint
    // a bounded width.
    final textPainter = TextPainter(
      text: TextSpan(
        text: text,
        style: TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
      ),
      textAlign: TextAlign.right,
      textDirection: TextDirection.ltr,
    )..layout();

    final caretWidth = isRoot
        ? WidgetThatCallsSaveLayer.caretWidth
        : WidgetThatCallsSaveLayer.caretWidth * 2;
    final breadcrumbWidth = textPainter.width + caretWidth + 4.0 * 2;

    return InkWell(
      onTap: onPressed,
      child: Container(
        width: breadcrumbWidth,
        padding: const EdgeInsets.all(2.0),
        child: CustomPaint(
          painter: _PainterThatCallsSaveLayer(
            textPainter: textPainter,
            isRoot: isRoot,
            breadcrumbWidth: breadcrumbWidth,
            colorScheme: theme.colorScheme,
          ),
        ),
      ),
    );
  }
}

class _PainterThatCallsSaveLayer extends CustomPainter {
  _PainterThatCallsSaveLayer({
    @required this.textPainter,
    @required this.isRoot,
    @required this.breadcrumbWidth,
    @required this.colorScheme,
  });

  final TextPainter textPainter;

  final bool isRoot;

  final double breadcrumbWidth;

  final ColorScheme colorScheme;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.pink;
    final path = Path()..moveTo(0, 0);

    canvas.saveLayer(null, paint);

    if (isRoot) {
      path.lineTo(0, WidgetThatCallsSaveLayer.height);
    } else {
      path
        ..lineTo(WidgetThatCallsSaveLayer.caretWidth,
            WidgetThatCallsSaveLayer.height / 2)
        ..lineTo(0, WidgetThatCallsSaveLayer.height);
    }
    canvas.restore();

    canvas.saveLayer(null, paint);

    path
      ..lineTo(breadcrumbWidth - WidgetThatCallsSaveLayer.caretWidth,
          WidgetThatCallsSaveLayer.height)
      ..lineTo(breadcrumbWidth, WidgetThatCallsSaveLayer.height / 2)
      ..lineTo(breadcrumbWidth - WidgetThatCallsSaveLayer.caretWidth, 0);

    canvas.drawPath(path, paint);
    canvas.restore();
    canvas.saveLayer(null, paint);
    canvas.restore();
    final textXOffset =
        isRoot ? 4.0 : WidgetThatCallsSaveLayer.caretWidth + 4.0;
    textPainter.paint(
      canvas,
      Offset(textXOffset,
          (WidgetThatCallsSaveLayer.height - textPainter.height) / 2),
    );
  }

  @override
  bool shouldRepaint(covariant _PainterThatCallsSaveLayer oldDelegate) {
    return textPainter != oldDelegate.textPainter ||
        isRoot != oldDelegate.isRoot ||
        breadcrumbWidth != oldDelegate.breadcrumbWidth ||
        colorScheme != oldDelegate.colorScheme;
  }
}