“Только радиус сверху или снизу: подробное руководство с примерами кода”

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

Метод 1: Виджет ClipRRect
Виджет ClipRRect позволяет обрезать дочерний виджет с закругленными углами. Чтобы добиться эффекта закругленного верха или низа, вы можете объединить виджет ClipRRect с виджетом FractionalTranslation. Вот пример:

ClipRRect(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(20.0),
    topRight: Radius.circular(20.0),
  ),
  child: FractionalTranslation(
    translation: Offset(0.0, -0.5), // Adjust the value to control the rounded area
    child: Container(
      color: Colors.blue,
      height: 200.0,
    ),
  ),
)

Метод 2: Custom Clipper
Flutter предоставляет класс CustomClipper, который позволяет создавать собственные пути обрезки. Вы можете создать собственный клипер, чтобы определить закругленную форму верхней или нижней части контейнера. Вот пример:

class TopRoundedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height);
    path.quadraticBezierTo(
      size.width / 2,
      size.height * 0.75,
      size.width,
      size.height,
    );
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }
  @override
  bool shouldReclip(TopRoundedClipper oldClipper) => false;
}
...
ClipPath(
  clipper: TopRoundedClipper(),
  child: Container(
    color: Colors.blue,
    height: 200.0,
  ),
)

Метод 3: CustomPaint
Виджет CustomPaint позволяет создавать собственные рисунки на холсте. Вы можете использовать этот виджет для рисования закругленных форм верхней или нижней части контейнера. Вот пример:

class TopRoundedPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.blue;
    final path = Path()
      ..lineTo(0, size.height)
      ..quadraticBezierTo(
        size.width / 2,
        size.height * 0.75,
        size.width,
        size.height,
      )
      ..lineTo(size.width, 0)
      ..close();
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(TopRoundedPainter oldPainter) => false;
}
...
CustomPaint(
  painter: TopRoundedPainter(),
  child: Container(
    height: 200.0,
  ),
)

В этой статье мы рассмотрели три различных метода достижения эффекта применения закругленных углов только к верхней или нижней части контейнера во Flutter. Используя виджет ClipRRect, CustomClipper или CustomPaint, вы можете легко настроить форму контейнеров. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим потребностям в дизайне.