用阴影创建弯曲的卡片

Question

我真的很需要您，因为我什至不知道如何实现它们，而且我也不知道如何调用它。

实际上，我想实现类似图像的功能（每张卡上的小圆圈-就像两张卡之间的链）。

在key的帮助下，我使用以下代码制作了图像：

class InfoPage extends StatefulWidget {
  InfoPage();

  @override
  _InfoPageState createState() => _InfoPageState();
}

class _InfoPageState extends State<InfoPage> {
  InfoItemModel infoData = dataSourceInfoUser;
  double basicSize = 70;

  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
      title: Text('Example'),
    ),
    body: Container(
          color: Colors.white,
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(
                  width: double.infinity,
                  height: 150,
                  child: AppCardField(
                    child: Text('Something'),
                  ),
                ),
                _buildCardWithCircle(
                  bgCircleX: 0.78,
                  bgCirceY:  -2.0,
                  innerContainerX: 0.756,
                  innerContainerY: -1.78,
                  colorInner: Colors.orange
                ),
              ],
            ),
          ),
        ),
  );

  _buildCardWithCircle({double bgCircleX, double bgCirceY, double innerContainerX, double innerContainerY, Color colorInner}) => Container(
        width: double.infinity,
        height: 150,
        child: Stack(
          children: <Widget>[
            Container(
              width: double.infinity,
              height: 150,
              child: AppCardField(
                child: Text('Something'),
              ),
            ),
            Align(
              alignment: Alignment(bgCircleX, bgCirceY),
              child: Container(
                height: basicSize,
                width: basicSize,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(50.0),
                ),
              ),
            ),
            Align(
              alignment: Alignment(innerContainerX, innerContainerY),
              child: Container(
                height: basicSize - 10,
                width: basicSize - 10,
                decoration: BoxDecoration(
                  color: colorInner,
                  borderRadius: BorderRadius.circular(50.0),
                ),
                child: Icon(Icons.vertical_align_center),
              ),
            ),
          ],
        ),
      );
}

class AppCardField extends StatelessWidget {
  final Widget child;
  final double height;
  final double paddingVertical, paddingHorizontal;
  final double paddingVerticalChild, paddingHorizontalChild;

  AppCardField({
    this.child,
    this.height,
    this.paddingVertical = 8,
    this.paddingHorizontal = 16,
    this.paddingVerticalChild = 8,
    this.paddingHorizontalChild = 16,
    Key key})
      : super(key: key);

  @override
  Widget build(BuildContext context) => Padding(
      padding: EdgeInsets.symmetric(
          vertical: paddingVertical, horizontal: paddingHorizontal),
      child: Container(
        height: height,
        decoration: BoxDecoration(
          color: Theme.of(context).primaryColor,
          borderRadius: BorderRadius.all(Radius.circular(8)),
          boxShadow: [
            BoxShadow(
              color: Colors.red,
              blurRadius: 15.0,
              offset: Offset(0.0, 5.0),
            ),
          ],
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(
              vertical: paddingVerticalChild,
              horizontal: paddingHorizontalChild),
          child: child,
        ),
      ));
}

但是在这里，我的卡片阴影和圆形的强烈白色背景存在问题，OFC我也需要这个阴影也在这个空白区域，问题是如何解决呢？

Answer 1

类似这样的东西

MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Some Stuff"),
        ),
        body: Column(
          children: <Widget>[
            Container(
              width: double.infinity,
              height: cardHeight,
              child: Stack(
                children: <Widget>[
                  Container(
                    width: double.infinity,
                    height: cardHeight,
                    child: Card(
                      color: Colors.blueGrey,
                      child: Text('Something'),
                    ),
                  ),
                  Align(
                    alignment: Alignment(-0.9,1.2),
                    child: Container(
                        height: 40.0,
                        width: 40.0,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(25.0),
                        ),
                      ),
                  ),
                  Align(
                    alignment: Alignment(-0.88,1.13),
                    child: Container(
                        height: 30.0,
                        width: 30.0,
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(25.0),
                        ),
                      ),
                  ),
                ],
              ),
            ),
            Align(
              alignment: Alignment(-0.85, 1.5),
              child: Container(
                height: 100.0,
                width: 15.0,
                decoration: BoxDecoration(
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),
      ),
    );

然后，您以另一种对齐值刚刚从另一张卡中获得了另一张卡。