Как сделать контейнер нестандартной формы во Flutter?

Question

Я должен сделать контейнер с дном треугольной формы, как показано ниже.

Как создать эту форму во флаттере?

Answer 1

Используйте это в дереве виджетов

      CustomPaint(
        size: Size(MediaQuery.of(context).size.width, 300),
        painter: CustomShapePainter(),
      ),

Создайте класс customShapePainter.

      class CustomShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 15;

    var path = Path();
path.moveTo(0,0);
path.lineTo(size.width, 0);

path.lineTo(size.width, size.height*0.8);
path.lineTo(size.width*0.5, size.height);
path.lineTo(0, size.height*0.8);
path.lineTo(0, 0);

canvas.drawPath(path, paint);
 }

   @override
  bool shouldRepaint(CustomShapePainter oldDelegate) {
    return false;
  }
}

Answer 2

вы можете использовать этот пакет , и после добавления этого пакета добавьте этот код, оберните 2 контейнера

      class MyCustomTriangleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width / 2, size.height * .2/*change this number to edit the triangle sahpe as you want and add more one Square*/);
path.lineTo(size.width, 0);

path.close();
return path;
}

@override
bool shouldReclip(CustomClipper old) {
return old != this;
 }
}

и используйте этот виджет

      ClipPath(
                clipper: MyCustomTriangleClipper (),
                child: Container(
                  height: 120,
                  // width: double.infinity,
                  color: Colors.black,
                ),
              ),