GDG Vientiane - Flutter Festival - Workshop

sticky_note.dart

import 'package:flutter/material.dart';
import 'dart:math' as math;

class StickyNote extends StatelessWidget {
  final double? bodyHeight;
  final Color? color;

  final Widget body;
  final int angle, shape;

  const StickyNote({this.color, this.bodyHeight, required this.body, Key? key, this.angle = 0, this.shape = 0}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return Stack(
      alignment: Alignment.center,
      children: [
        Transform.rotate(
          angle: angle * math.pi / 180,
          child: Container(
            decoration: BoxDecoration(boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.3),
                blurRadius: 8,
                spreadRadius: 0,
              )
            ]),
            child: CustomPaint(
              painter: BoxShadowPainter(shape),
              child: ClipPath(
                clipper: CustomStickyNotePainter(shape),
                child: Container(
                  // color: Colors.pink,
                  decoration: BoxDecoration(
                    color: color ?? Colors.yellow,
                    // boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 4, spreadRadius: 8)]
                  ),
                ),
              ),
            ),
          ),
        ),
        body
      ],
    );
  }
}

Path drawPath(Size size, int shape, {bool isDrawingShadow = false}) {
  final bottom = isDrawingShadow ? size.height - 8 : size.height;

  const borderRadius = 8.0;

  final paths = [
    Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, 0)
      ..lineTo(size.width, bottom)
      ..lineTo(size.width / 3, bottom)
      ..quadraticBezierTo(0, bottom, 0, bottom - borderRadius)
      ..lineTo(0, 0)
      ..close(),
    Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, 0)
      ..lineTo(size.width, bottom / 3)
      // ..lineTo(size.width, bottom - borderRadius)
      ..quadraticBezierTo(size.width, bottom - borderRadius, size.width - borderRadius, bottom)
      ..lineTo(0, bottom)
      ..lineTo(0, 0)
      ..close(),
    Path()
      ..moveTo(0, 0)
      ..lineTo(0, bottom)
      ..lineTo(size.width, bottom)
      ..lineTo(size.width / 3, bottom)
      ..quadraticBezierTo(size.width, bottom, size.width, bottom - borderRadius)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0)
      ..close(),
    Path()
      ..moveTo(size.width, 0)
      ..lineTo(0, 0)
      ..lineTo(0, bottom / 3)
      ..quadraticBezierTo(0, bottom - borderRadius, 0 + borderRadius, bottom)
      ..lineTo(size.width, bottom)
    //   ..lineTo(0, 0)
      ..close(),
  ];

  return paths[shape];
}

class BoxShadowPainter extends CustomPainter {
  final int shape;
  BoxShadowPainter(this.shape);

  @override
  void paint(Canvas canvas, Size size) {
    Path path = drawPath(size, shape, isDrawingShadow: true);

    canvas.drawShadow(path, Colors.black45, 8.0, false);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

class CustomStickyNotePainter extends CustomClipper<Path> {
  final int shape;
  const CustomStickyNotePainter(this.shape);

  @override
  Path getClip(Size size) {
    Path path = drawPath(size, shape);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}