Как создать clipPath, как показано на рисунке - PullRequest
Новая
       26

Как создать clipPath, как показано на рисунке

0 голосов
/ 18 октября 2019

Я хочу сгенерировать виджет с таким же клиппатом, как на изображении. Я говорю о белом разделе экрана приложения, который содержит информацию.

enter image description here

Ниже код был тем, что я пытался экспериментировать, но не получилось! 

 Path getClip(Size size) {
var path = new Path();
var controlpoint = Offset(10.0, size.height);
var endpoint = Offset(size.width / 2, size.height);

path.lineTo(0.0, size.height - 100);

path.quadraticBezierTo(
    controlpoint.dx, controlpoint.dy, endpoint.dx, endpoint.dy);

path.lineTo(size.width, size.height);
path.lineTo(size.width, 0.00);

return path;

Пожалуйста, помогите мне с этим кодом:)

Редактировать: я дошел до этой части, но я все еще застрял: (

**Path getClip(Size size) {
final path = Path();
path.lineTo(size.width, 100);
path.lineTo(size.width, size.height);
path.lineTo(0.00, size.height);
path.close();

return path;

} **

и выше настраиваемый clipPath, используя ClipRRect.

enter image description here

1 Ответ

0 голосов
/ 19 октября 2019

Наконец, некоторые игры с кодом привели к следующему выводу: 

Path getClip(Size size) {
final path = Path();
path.lineTo(20.0, 0.0);
path.lineTo(size.width, 120);
path.lineTo(size.width, size.height);
path.lineTo(0.00, size.height);
path.close();

return path;

добавил родителя примерно так: 

ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(25.0),
            bottomLeft: Radius.circular(25.0),
          ),
          child: ClipPath(
          clipper: SinglePageClipper(),
          child: Container(
            color: Colors.red,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 400,
                ),
                Center(child: Text('Demo Page'),)
              ],
            ),
          ),
        ),
      ),

enter image description here

Я думаю, что это кое-что, что можно улучшить, поэтому постараюсь это сделать. но в то же время, если у кого-то есть лучший подход. пожалуйста, просветите нас знанием, так как для начинающего, как я, это заняло гораздо больше времени.

...