Android 我想要自定义用户界面和仪表盘相同的票证

我有一个像这样的用户界面

但我不希望后面的背景是图像，因为当我遇到一部屏幕更大的手机时，它的边缘会参差不齐，而且不平滑

---

我用以下方式定制了它，它看起来非常好：

创建

TicketClipper

class扩展CustomClipper

class TicketClipper extends CustomClipper<Path> {


@override
  Path getClip(Size size) {
    final Path path = Path();

    path.lineTo(size.width*3/4, 0.0);
    path.relativeArcToPoint(const Offset(20, 0),
        radius: const Radius.circular(10.0), largeArc: true, clockwise: false);
    path.lineTo(size.width-10, 0);
    path.quadraticBezierTo(size.width, 0.0, size.width, 10.0);
    path.lineTo(size.width, size.height -10 );
    path.quadraticBezierTo(
        size.width, size.height, size.width-10, size.height);
    path.lineTo(size.width*3/4+20, size.height);
    path.arcToPoint(Offset((size.width*3/4), size.height),
        radius: const Radius.circular(10.0), clockwise: false);
    path.lineTo(10.0, size.height);
    path.quadraticBezierTo(0.0, size.height, 0.0, size.height - 10);
    path.lineTo(0.0, 10.0);
    path.quadraticBezierTo(0.0, 0.0, 10.0, 0.0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

最后使用：

PhysicalShape(
    color: Colors.white,
    elevation: 4,
    shadowColor: Color(0xFFE4E4E4).withOpacity(0.5),
    clipper: TicketClipper(),
    child: Stack(
      children: <Widget>[
        ClipPath(
          clipper: TicketClipper(),
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: 100,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10.0)),
          ),
        ),
        CustomPaint(
          painter: BorderPainter(),
          child: Container(
            height: 100,
            width: width,
          ),
        ),
      ],
    ),
  )

PhysicalShape(
颜色：颜色，白色，
标高：4，
阴影颜色：颜色（0xFFE4E4）。不透明度（0.5），
裁剪器：TicketClipper（），
子：堆栈(
儿童：[
克利帕斯(
裁剪器：TicketClipper（），
子：容器(
宽度：MediaQuery.of（context）.size.width，
身高：100，
装饰：盒子装饰(
颜色：颜色，白色，
边界半径：边界半径。圆形（10.0）），
),
),
定制油漆(
画家：画家（），
子：容器(
身高：100，
宽度：宽度，
),
),
],
),
)

运行时将显示结果：

---

SVG可能是？？？使用SVG，您无法更正视图两侧仪表板的位置。无需自定义

CustomClipper

和自定义

CustomPainter

-您只需自定义

ShapeOrder

-这是一种颤振方式-检查其他形状是如何制作的，如

RoundedRectangleBorder

，

CircleBorder

etc这可能会使上述UI中放置阴影的位置不正确。请检查

ShapeDecoration

在哪里可以定义任何您想要的阴影可以帮我确定此UI

CustomPainter

PhysicalShape(
    color: Colors.white,
    elevation: 4,
    shadowColor: Color(0xFFE4E4E4).withOpacity(0.5),
    clipper: TicketClipper(),
    child: Stack(
      children: <Widget>[
        ClipPath(
          clipper: TicketClipper(),
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: 100,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10.0)),
          ),
        ),
        CustomPaint(
          painter: BorderPainter(),
          child: Container(
            height: 100,
            width: width,
          ),
        ),
      ],
    ),
  )