Question

我试图在底模中实现圆弧形状吗？

到目前为止，我已经尝试过下面的代码，但是形状不能以模态实现。

class ArcPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path();
    path.lineTo(0, size.height);
    path.quadraticBezierTo(
        size.width / 2, size.height - 100, size.width, size.height);
    path.lineTo(size.width, 0);
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 0.0;
    canvas.drawPath(path, paint);
    paint.color = Colors.blue[600];
  }

  @override
  bool shouldRepaint(ArcPainter oldDelegate) {
    return false;
  }
}

void _settingModalBottomSheet(context) {
  showModalBottomSheet(
      context: context,
      builder: (BuildContext bc) {
        return CustomPaint(
          painter: ArcPainter(),
          // height: MediaQuery.of(context).size.height / 2 - 20,
          // padding: EdgeInsets.all(30),
          child: Wrap(
            children: <Widget>[
              Center(child: Text('Add a new task')),
              TextFormField(
                decoration: const InputDecoration(
                  labelText: 'Task *',
                ),
                onSaved: (String value) {
                  // This optional block of code can be used to run
                  // code when the user saves the form.
                },
                validator: (String value) {
                  return value.contains('@') ? 'Do not use the @ char.' : null;
                },
              ),
              Divider(),
              Chip(
                avatar: CircleAvatar(
                  backgroundColor: Colors.grey.shade800,
                  child: Text('AB'),
                ),
                label: Text('Aaron Burr'),
              )
            ],
          ),
        );
      });
}

改变模态形状的最佳方法是什么？

Expecting results as show in the UI(to do list app)

Answer 1

使用shape_of_view包更改底页的形状和backgroundColor，使底页透明。

showModalBottomSheet(
        elevation: 0,
        context: context,
        backgroundColor: Colors.transparent,
        clipBehavior: Clip.hardEdge,
        builder: (BuildContext bc) {
          return ShapeOfView(
              shape: ArcShape(
                  direction: ArcDirection.Outside,
                  height: 20,
                  position: ArcPosition.Top),
              child: Container(
                  color: Colors.white,
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
                    child: Container(
                      color: Colors.pink,
                      height:50

                    ),
                  )));
        });

如何在底片模态中创建ARC形状？

1 个答案: