Блог

Главная - Вопросы по программированию - Как создать неровную границу в flutter

Как создать неровную границу в flutter

#flutter #flutter-layout #border

Вопрос:

Я хочу создать неровную границу вокруг контейнера (см. Изображение ниже). Кто-нибудь знает, как это сделать ?Пример неровной границы

Ответ №1:

Существует плагин, который упрощает это: dotted_border

Пример:

 DottedBorder(
    color: Colors.black,
    strokeWidth: 1,
    child: FlutterLogo(size: 148),
)

Комментарии:

1. Я имею в виду неровную границу на моем изображении, а не пунктирную границу вокруг изображения

Ответ №2:

Я нашел идеальное решение. Я использую путь к вырезке и добавляю пользовательский клиппер:

 class HorizontalJaggedBorderClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width, 0);
    double y = 0;
    double x = size.width;
    double increment = size.height / 6;
    double delta = size.height * 0.15;

    while (y < size.height) {
      y  = increment;
      x = (x == size.width) ? size.width - delta : size.width;
      path.lineTo(x, y);
    }
    path.lineTo(0, size.height);
    x = 0;
    while (y > 0) {
      x = (x == 0) ? delta : 0;
      y -= increment;
      path.lineTo(x, y);
    }

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return oldClipper != this;
  }
}
Метки: