如何在颤动中设计这个自定义抽屉

Question

嘿，我现在尝试通过多种方式来创建以下抽屉设计：

[当我使用OverflowBox与ClipOval进行比较时，这种设计是结果：

ClipOval(
  child: OverflowBox(
    maxHeight: double.infinity,
    maxWidth: double.infinity,
    child: DecoratedBox(
      decoration: BoxDecoration(
        color: AppColors.backgroundColor
      ),
      child: Container(
        height: AppConstants.screenHeight,
        width: AppConstants.screenWidth,
      ),
    ),
  ),
);

我如何获得上述设计。我知道必须使用溢出框和某种类型的Clipper来确保它一定要完成，但是以某种方式我无法使其正常工作。

Answer 1

重要将抽屉设为透明：将抽屉的elevation设置为0，否则会看到透明抽屉的边缘。

Scaffold(
  appBar: AppBar(title: Text(title)),
  body: Center(child: Text('Custom Drawer Shape')),
  drawer: Theme(
    data: Theme.of(context).copyWith(
      canvasColor: Colors.transparent,  // set the Color of the drawer transparent; we'll paint above it with the shape
    ),
    child: Drawer(
      elevation: 0,   // set elevation to 0, otherwise you see the transparent drawer a little bit
      child: Container(
        padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
        child: CustomPaint(
          painter: DrawerPainter(color: Colors.white), // this is your custom painter
          child: ListView(
            padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
            children: <Widget>[
              // Add your menu e.g. with ListTile
            ],
          ),
        ),
      ),
    ),
  ),
);

// Class which draws the custom shape
class DrawerPainter extends CustomPainter {
  final Color color;
  DrawerPainter({this.color = Colors.black});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = color
      ..strokeWidth = 3
      ..style = PaintingStyle.fill;
    canvas.drawPath(getShapePath(size.width, size.height), paint);
  }

  // This is the path of the shape we want to draw
  Path getShapePath(double x, double y) {
    return Path()
      ..moveTo(0, 0)
      ..lineTo(x / 2, 0)
      ..quadraticBezierTo(x, y / 2, x / 2, y)
      ..lineTo(0, y);
  }

  @override
  bool shouldRepaint(DrawerPainter oldDelegate) {
    return oldDelegate.color != color;
  }
}

您可以在CustomPaint小部件中使用CustomPainter。重要]