Блог

Я пытаюсь добиться формы дуги в режиме нижнего листа?

До сих пор я пробовал приведенный ниже код, но форма не достигается в модальном режиме.

 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'),
              )
            ],
          ),
        );
      });
}
  

Каков наилучший способ изменить форму модала?

Ожидаемый результат, отображаемый в пользовательском интерфейсе (приложение «список дел»)

используйте пакет 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

                    ),
                  )));
        });