Question

我需要为聊天消息应用程序制作带有角度的容器。

<form action="http://servername/urlpart1/#/urlpart2">
  <input name="id" value = "Prefix-" />
  <input type="submit" />
</form>

请帮助，如何制作？

Answer 1

您可以在这里制作一个小部件并调用该小部件以供使用。

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        Positioned(
          top: 20,
          left: 20,
          child: Container(
            height: 50,
            width: 300,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10),
                  topRight: Radius.circular(10),
                  bottomLeft: Radius.circular(10),
                  bottomRight: Radius.circular(10)),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 3), // changes position of shadow
                ),
              ],
            ),
          ),
        ),
        Positioned(
          top: 70,
          left: 300,
          child: CustomPaint(painter: triangle()),
        )
      ],
    ));
  }

自定义绘画，您可以调用以下小部件。

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

    var path = Path();
    path.lineTo(-10, 0);
    path.lineTo(0, 10);
    path.lineTo(10, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

现在只需按自己的意愿编辑路径即可。

Answer 2

更改了我的答案，并改编自Flutter - ClipPath

Container(
  margin:
      EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
  height: 100,
  width: double.infinity,
  decoration: ShapeDecoration(
    color: Colors.white,
    shape: MessageBorder(),
    shadows: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
),




class MessageBorder extends ShapeBorder {
  final bool usePadding;

  MessageBorder({this.usePadding = true});

  @override
  EdgeInsetsGeometry get dimensions =>
      EdgeInsets.only(bottom: usePadding ? 20 : 0);

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    rect = Rect.fromPoints(rect.topLeft, rect.bottomRight - Offset(0, 20));
    return Path()
      ..addRRect(RRect.fromLTRBAndCorners(
          rect.left, rect.top, rect.right, rect.bottom,
          topLeft: Radius.circular(10),
          topRight: Radius.circular(10),
          bottomRight: Radius.circular(10)))
      ..moveTo(30, rect.bottomCenter.dy)
      ..relativeLineTo(0, 20)
      ..relativeLineTo(20, -20)
      ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  @override
  ShapeBorder scale(double t) => this;
}

如何使弯曲的容器颤动

2 个答案: