Flutter：堆栈和墨水叠加

Question

我正在使用

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,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),

Answer 1

您可以使用Container代替Ink并且能够使用渐变效果。

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,
          ),
        ),
      ),
    )

Answer 2

尝试简单地将您的

Ink

小部件包装在

Material

中。

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

Positioned(
                    right: -5.0,
                    bottom: -5.0,
                    child: SizedBox(
                      height: 30.0,
                      width: 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,
                            color: Colors.white,
                            size: 15.0,
                          ),
                        ),
                      ),
                    ),
                  )