Лучший способ сделать изогнутую панель приложения в флаттере - PullRequest
Новая
       51

Лучший способ сделать изогнутую панель приложения в флаттере

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

Я пытаюсь создать пользовательскую изогнутую панель приложения, как показано в примере ниже enter image description here

и после многих попыток вот мой выстрел

enter image description here

исходный код: 

class CustomShapeBorder extends ContinuousRectangleBorder {
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {

  final double innerCircleRadius = 150.0;

  Path path = Path();
  path.lineTo(0, rect.height);
  path.cubicTo(
    rect.width / 1.5 - 40, rect.height + innerCircleRadius - 40,
    rect.width / 1.5 + 40, rect.height + innerCircleRadius - 40,
    rect.width / 1.5+ 75, rect.height + 50
  );
  path.quadraticBezierTo(rect.width / 1.5 + (innerCircleRadius / 2) + 30, rect.height + 35, rect.width, rect.height);
  path.lineTo(rect.width, 0.0);
  path.close();

  return path;
}

есть простой способ сделать это, например, SVG.

1 Ответ

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

Я мог бы придумать такой результат:

enter image description here

Вот это Path: 

double x = 150, y = 45, r = 0.5;
Path path = Path()
  ..addRRect(RRect.fromRectAndCorners(rect))
  ..moveTo(rect.bottomRight.dx - 30, rect.bottomCenter.dy)
  ..relativeQuadraticBezierTo(((-x / 2)+(x/6)) * (1 - r), 0, -x / 2 * r, y * r)
  ..relativeQuadraticBezierTo(-x / 6 * r, y * (1 - r), -x / 2 * (1 - r), y * (1 - r))
  ..relativeQuadraticBezierTo(((-x / 2)+(x/6)) * (1 - r), 0, -x / 2 * (1 - r), -y * (1 - r))
  ..relativeQuadraticBezierTo(-x/6*r , -y * r, -x / 2 * r, -y * r);

А вотХорошая статья, чтобы узнать основы создания фигур: Контуры во флаттере: визуальное руководство

...