how to apply gradient color on the image in flutter-CodePudding

I want to apply gradient color to an image,I tried wrapping the image in a container and in decoration giving the gradient.But then the color appies to the entire container,incuding the image background.But that is not what i expected,

       Container(
       decoration: BoxDecoration(
       gradient: LinearGradient(
       begin: Alignment.topLeft,
       end: Alignment.bottomRight,
       colors: [
       Color.fromRGBO(103, 7, 224, 1),
       Color.fromRGBO(255, 97, 220, 1)
       ],
       )),
       child: SvgPicture.asset(
       AssetImages.REWARDS,
       height: 28,
       width: 20,
       ),
       )

Please help..

Container(
           decoration: BoxDecoration(
           gradient: LinearGradient(
           begin: Alignment.topLeft,
           end: Alignment.bottomRight,
           colors: [
           Color.fromRGBO(103, 7, 224, 1),
           Color.fromRGBO(255, 97, 220, 1)
           ],
           )),
           child: SvgPicture.asset(
           AssetImages.REWARDS,
           height: 28,
           width: 20,
           ),
           )

im expecting something like this

CodePudding user response：

I have created a helper class for gradient icon :

    class GradientIcon extends StatelessWidget {
      GradientIcon(
          this.icon,
          this.size,
          );
      Color buttonbBlue2 =Color(0xFF00B4F8); //colors you want
      Color buttonbBlue3 =Color(0xFF00A1EF);
      final IconData icon;
      final double size;
      final Gradient gradient = LinearGradient(
      begin: Alignment.bottomLeft,
      end: Alignment.topRight,
      stops: [ 0.1, 0.7],
      colors: <Color>[
      buttonbBlue2 ,
      buttonbBlue3 
    ],
  );;
    
      @override
      Widget build(BuildContext context) {
        return ShaderMask(
          child: SizedBox(
            width: size * 1.2,
            height: size * 1.2,
            child: Icon(
              icon,
              size: size,
              color: Colors.white,
            ),
          ),
          shaderCallback: (Rect bounds) {
            final Rect rect = Rect.fromLTRB(0, 0, size, size);
            return gradient.createShader(rect);
          },
        );
      }
    }

Usage :

GestureDetector(
                                          onTap: () {
                                            _openPopup(context,
                                                "Update Mobile ", "Mobile*");
                                          },
                                          child: GradientIcon(
                                            Icons.edit,
                                            20.0,
                                           
                                          )),