Пользовательский радиус клипера Flutter

Я пытаюсь создать собственный клипер с помощью Custom Clipper во FLutter, но я не знаю, как добавить несколько закругленных углов в свою фигуру.

Скриншот требуемого результата слева и мой результат справа: Пользовательский радиус клипера Flutter

Вот мой код клипера

class SideArrowClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final Path path = Path();
    final double startMargin = size.width / 14;
    final double s1 = size.height * 0.4;
    final double s2 = size.height * 0.6;
    print('S1:$s1 SH:${size.height / 2} S2:$s2');
    path.lineTo(startMargin, 0);
    path.lineTo(startMargin, s1);
    path.lineTo(0, size.height / 2);
    path.lineTo(startMargin, s2);
    path.lineTo(startMargin, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

flutter widget paint clip

14.07.2019 16:57

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

7 989

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я бы порекомендовал взглянуть на этот плагин flutter_custom_clippers. Этот плагин позволяет вам использовать различные интересные формы, такие как MessageClipper(), показанный на изображении ниже. Если повернуть на 90 градусов, это может удовлетворить ваши потребности.

В качестве альтернативы вы можете соединить TriangleClipper() и простой Container() с овальной рамкой, чтобы получить закругленные края.

Как показано в примере по ссылке выше, это выглядит примерно так:

ClipPath(
  clipper: MessageClipper(borderRadius: 16),
  child: Container(
    height: 200,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(16.0)),
      color: Colors.red,
    ),
    child: Center(child: Text("MessageClipper()")),
),

A few shapes available from the plugin

Я знаю эту библиотеку, но вращение не является прямым решением

— 15.07.2019 08:34

14.07.2019 18:43

Ответ принят как подходящий

Я использовал addRRect(RRect.fromRectAndRadius для прямоугольника со скругленными углами

import 'package:flutter/material.dart';

    class SideArrowClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        final double width = size.width;
        final double height = size.height;
        final double startMargin = width / 14;

        final double s1 = height * 0.3;
        final double s2 = height * 0.7;
        final Path path = Path()
          ..addRRect(RRect.fromRectAndRadius(
              Rect.fromLTWH(startMargin, 0, width-startMargin, height),
              const Radius.circular(5)))
          ..lineTo(startMargin, s1)
          ..lineTo(0, size.height / 2)
          ..lineTo(startMargin, s2)
          ..close();
        return path;
      }

      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return oldClipper != this;
      }
    }

16.07.2019 09:16

Еще один способ реализовать это — использовать метод path.arcToPoint перед каждым гневом. Вот мой пример того, как я его реализовал:

  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(2.0, 0.0);
    path.lineTo(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL - 1 , 0.0);
    path.arcToPoint(Offset(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL + 1 , 2.0), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(size.width - 1, size.height/2 - 1);
    path.arcToPoint(Offset(size.width - 1, size.height/2 + 1), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL + 1, size.height - 1);
    path.arcToPoint(Offset(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL - 1, size.height), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(2, size.height);
    path.arcToPoint(Offset(0.0, size.height - 1), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(0.0, 1.0);
    path.arcToPoint(Offset(1.0, 0.0), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.close();
    return path;
  }

А это фигура с радиусом угла радиусом 2 пикселя: