Flutter: How to clip specific sides of a widget

111 Views Asked by At

I want to clip a given side of a widget and leave the others unclipped. But I can't get it to work. It just clips everything so that nothing is left:

import 'package:flutter/widgets.dart';

class BClipSide extends StatelessWidget {
  final bool left;
  final bool top;
  final bool right;
  final bool bottom;
  final Widget child;

  const BClipSide({
    super.key,
    this.left = false,
    this.top = false,
    this.right = false,
    this.bottom = false,
    required this.child,
  });

  const BClipSide.symmetric({
    super.key,
    bool horizontal = false,
    bool vertical = false,
    required this.child,
  })  : left = horizontal,
        right = horizontal,
        top = vertical,
        bottom = vertical;

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: _BSideClipper(
        left: left,
        top: top,
        right: right,
        bottom: bottom,
      ),
      child: child,
    );
  }
}

class _BSideClipper extends CustomClipper<Path> {
  final bool left;
  final bool top;
  final bool right;
  final bool bottom;

  _BSideClipper({
    this.left = false,
    this.top = false,
    this.right = false,
    this.bottom = false,
  });

  @override
  Path getClip(Size size) {
    final path = Path();

    path.moveTo(0, size.height);
    if (left) path.lineTo(0, 0);

    path.moveTo(0, 0);
    if (top) path.lineTo(size.width, 0);

    path.moveTo(size.width, 0);
    if (right) path.lineTo(size.width, size.height);

    path.moveTo(size.width, size.height);
    if (bottom) path.lineTo(0, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

0

There are 0 best solutions below