颤动：纸叠和墨水覆盖

问题描述

我正在使用Stack重新创建此效果：

但是由于某种原因，使用Ink小部件能够获得渐变效果，这就是我的目的：

这是我的代码：

Stack(
                        children: [
                          SizedBox(
                            height: 100.0,width: 100.0,child: ClipRRect(
                              borderRadius: BorderRadius.circular(20.0),child: CachednetworkImage(
                                imageUrl:
                                    'https://images.unsplash.com/photo-1570296767266-60ccc88974a5',fit: BoxFit.cover,placeholder: (context,url) => MC_Shimmer(),),Positioned(
                            right: -5.0,bottom: -5.0,child: SizedBox(
                              height: 30.0,width: 30.0,child: Ink(
                                decoration: Boxdecoration(
                                  gradient: gradient,borderRadius:
                                      BorderRadius.all(Radius.circular(5.0)),child: Icon(
                                  OMIcons.cameraAlt,color: Colors.white,size: 15.0,)
                        ],

解决方法

您可以使用“容器”代替“墨水”，并可以使用渐变效果。

Positioned(
      right: -5.0,bottom: -5.0,child: SizedBox(
        height: 30.0,width: 30.0,child: Container(
          decoration: BoxDecoration(
            gradient: gradient,borderRadius:
            BorderRadius.all(Radius.circular(5.0)),),child: Icon(
            OMIcons.cameraAlt,color: Colors.white,size: 15.0,)

,

我在飞镖垫上试过了，效果很好。

Positioned(
                    right: -5.0,child: SizedBox(
                      height: 30.0,child: Material(
                        child: Ink(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                                colors: [Colors.pink,Colors.yellow]),borderRadius: BorderRadius.all(Radius.circular(5.0)),child: Icon(
                            Icons.camera,)