Как нарисовать пользовательский прямоугольник с радиусом границы в Flutter? - PullRequest
Новая
       23

Как нарисовать пользовательский прямоугольник с радиусом границы в Flutter?

1 голос
/ 19 апреля 2020

Мой пользовательский интерфейс выглядит следующим образом: enter image description here

Поэтому я пишу некоторый код, используя CodePainter во Flutter. Вот мой код: 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class BackgroundShape extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint();
    paint.color = Colors.black;
    var smallRect = Alignment.bottomCenter.inscribe(Size(100, 50), Rect.fromLTWH(size.width/2 -35, size.height-40, 40, 30));
    var path = Path();
    path.fillType = PathFillType.evenOdd;
    path.addRRect(RRect.fromRectAndCorners(Rect.fromLTWH(0, 0, size.width, size.height), bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)));
    path.addRRect(RRect.fromRectAndCorners(smallRect, topLeft: Radius.circular(10), topRight: Radius.circular(10)));
    path.lineTo(0, size.height);
    path.lineTo(size.width/2 - 35, size.height);
    path.lineTo(size.width/2 - 35, size.height-40);
    path.lineTo(size.width/2 + 35, size.height-40);
    path.lineTo(size.width/2 + 35, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Вот мой результат: enter image description here

Как добавить радиус границы? помогите пожалуйста: D спасибо!

...