Why is only part of icon getting gradient in flutter with Shader Mask

Question

I'm trying to put a gradient on my Flutter icons with the ShaderMask class, however only part of them is actually getting color. Here is what it looks like:

Here is my Widget function for the button gradient mask:

Widget playBarIcon(IconData icon, double size) {
return ShaderMask(
  blendMode: BlendMode.srcATop,
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [
        Theme.of(context).accentColor,
        Theme.of(context).primaryColor
      ],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    ).createShader(bounds);
  },
  child: Icon(
    icon,
    size: size,
  ),
);
}

And here is the code that calls the function:

IconButton(
          padding: EdgeInsets.only(right: 40),
          icon: playBarIcon(Icons.record_voice_over, 35),
          onPressed: () {},
        ),
        IconButton(
          padding: EdgeInsets.only(right: 40),
          icon: _playing
              ? playBarIcon(Icons.pause_circle_filled, 70)
              : playBarIcon(Icons.play_circle_filled, 70),
          onPressed: () {
            playPause();
          },
        ),
        IconButton(
          padding: EdgeInsets.only(left: 40),
          icon: _metronomeActive
              ? playBarIcon(Icons.movie_creation, 35)
              : Icon(
                  Icons.movie_creation,
                  color: Colors.black45,
                  size: 35,
                ),
          onPressed: () {},

This may be because I'm applying padding to my IconButton, but I've played around a lot with my code and I have no clue how to solve this.

Answer 1

here is the code that calls the function

body: Center(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          IconButton(
            icon: LinearGradientMask(
              child: Icon(
                Icons.record_voice_over,
                color: Colors.white,
              ),
            ),
            iconSize: 35,
            color: Colors.black,
            onPressed: () {},
          ),
          IconButton(
            icon: _playing
                ? LinearGradientMask(
                    child: Icon(
                      Icons.pause_circle_filled,
                      color: Colors.white,
                    ),
                  )
                : LinearGradientMask(
                    child: Icon(
                      Icons.play_circle_filled,
                      color: Colors.white,
                    ),
                  ),
            iconSize: 35.0 * 2.0,
            color: Colors.black,
            onPressed: () {
              _playing == false ? _playing = true : _playing = false;
              setState(() {});
            },
          ),
          IconButton(
            icon: LinearGradientMask(
              child: Icon(
                Icons.movie_creation,
                color: Colors.white,
              ),
            ),
            iconSize: 35,
            color: Colors.black,
            onPressed: () {},
          ),
        ],
      ),
    ),

Here is Widget function for the button gradient mask

class LinearGradientMask extends StatelessWidget {
  LinearGradientMask({this.child});
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (bounds) => LinearGradient(
        begin: Alignment.centerLeft,
        colors: [
          Colors.orange.shade100,
          Colors.orange.shade900,
        ],
        tileMode: TileMode.mirror,
      ).createShader(bounds),
      child: child,
    );
  }
}

Here is the Result