Блог

Как создать подобный контейнер, нижняя граница должна быть изогнутой

Вы можете создать CustomPainter , чтобы нарисовать форму:

 class MyPainter extends CustomPainter {
  final Color color;
  final double strokeWidth;

  MyPainter({this.color = Colors.black, this.strokeWidth = 5.0});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth;
    final path = Path()
      ..lineTo(size.width, 0)
      ..lineTo(size.width, size.height)
      ..moveTo(0, 0)
      ..lineTo(0, size.height)
      ..moveTo(0, size.height)
      ..quadraticBezierTo(size.width / 2, 0, size.width, size.height);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
  

Использование:

 CustomPaint(
  painter: MyPainter(strokeWidth: 4),
  child: Container(
    width: 300,
    height: 50,
  ),
)
  

Результат:

Примечание: Вместо quadricBezierTo вы можете использовать arcTo :

(не забудьте импортировать dart:math для использования pi )

 ...
    final path = Path()
      ..lineTo(size.width, 0)
      ..lineTo(size.width, size.height)
      ..moveTo(0, 0)
      ..lineTo(0, size.height)
      ..moveTo(0, size.height)
      ..arcTo(Rect.fromLTWH(0, size.height / 2, size.width, size.height), -pi,
          pi, false); // arc instead of quadricBezier
...
  

Результат: