flutterflutter-button

Flutter - show ripple effect over a Container having Gradient

I have created a custom circular button with a gradient as follows:

enter image description here

Material(
  color: Colors.transparent,
  child: InkWell(
    onTap: () {},
    splashColor: Colors.green,
    borderRadius: BorderRadius.circular(36),
    child: Container(
      height: 64,
      width: 64,
      alignment: Alignment.center,
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        gradient: LinearGradient(
          colors: <Color>[
            Color(0xFF00ABF4),
            Color(0xFF00A1E9),
            Color(0xFF0168AB),
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: const Icon(
        Icons.add,
        color: Colors.white,
        size: 32,
      ),
    ),
  ),
),

Now, it does not show the ripple effect! How can we achieve the ripple effect over a gradient background?

Solution

  • enter image description here

    I do this to achieve that:

    Center(child:Ink(
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
    gradient: LinearGradient(
      colors: <Color>[
        Color(0xFF00ABF4),
        Color(0xFF00A1E9),
        Color(0xFF0168AB),
      ],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    ),
  ),
  child: InkWell(
    onTap: () {},
    borderRadius: BorderRadius.circular(36),
    child: Container(
      height: 64,
      width: 64,
      alignment: Alignment.center,
      child: const Icon(
        Icons.add,
        color: Colors.white,
        size: 32,
      ),
    ),
  ),
))