带有透明图标的剪辑容器

时间:2019-05-19 20:13:48

标签: flutter

我想知道什么是最好的方法,以实现右下角的圆形图标按钮的效果。

请注意,该图标是透明的并显示图像背景。
我尝试使用Stack小部件,但无法正确放置它,也无法获得透明的颜色。

Wanted Result

目前我有这个:

class Banner extends StatelessWidget {
  final String src;

  const Banner(this.src, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: Stack(children: <Widget>[
        Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
          ),
          child: Stack(
            children: <Widget>[
              Image.network(src),
              LayoutBuilder(
                builder: (context, constraints) {
                  var calculatedOverlay = constraints.maxHeight / 3;
                  return Align(
                    alignment: Alignment.bottomRight,
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(calculatedOverlay),
                        ),
                        color: Colors.white,
                      ),
                      height: calculatedOverlay,
                      width: calculatedOverlay,
                    ),
                  );
                },
              ),
            ],
          ),
        ),
        Material(
          type: MaterialType.transparency,
          child: InkWell(
            onTap: () {},
          ),
        ),
      ]),
    );
  }
}

这将导致以下结果:

Result

谢谢。

0 个答案:

没有答案