CODEWITHSUNDEEP
dartflutter
Gurleen Sethi
Gurleen Sethi

Reputation: 3502

Inkwell not showing ripple when used with Container decoration

I want to add a ripple on an item, it is working fine until I add a gradient on the item using BoxDecoration.

Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Material(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
        elevation: 6.0,
        shadowColor: Colors.grey[50],
        child: InkWell(
          onTap: () {},
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: AlignmentDirectional.bottomStart,
                end: AlignmentDirectional.topEnd,
                colors: [
                  Colors.yellow[800],
                  Colors.yellow[700],
                ],
              ),
            ),
            padding: EdgeInsets.all(16.0),
            child: Text(
              widget.title,
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }

Upvotes: 52

Views: 36630

Answers (5)

JupiterT
JupiterT

Reputation: 368

If anyone came here looking to do use an inkwell with a circle decoration (like I did), I used the accepted answer to come up with this.

Material(
  child: Ink(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.grey[350],
        border: Border.all(
          color: Colors.red,
          width: 4.0,
        ),
      ),
      child: InkWell(
        customBorder: const CircleBorder(),
        onTap: onTap,
        child: const Icon(Icons.add, size: 48, color: Colors.white),
      ),
    ));

Upvotes: 4

Crizant
Crizant

Reputation: 1661

Update in 2019:

You should use Ink widget inside Material, instead of Container. It takes decoration parameter as well:

Material(
      child: Ink(
        decoration: BoxDecoration(
          // ...
        ),
        child: InkWell(
          onTap: () {},
          child: child, // other widget
        ),
      ),
);

Upvotes: 117

Rafiqul Hasan
Rafiqul Hasan

Reputation: 3602

Splash color is overlap by container BoxDecoration

Try this

  Widget build(BuildContext context) {
   return new Container(
      decoration: BoxDecoration(
      borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
      gradient: LinearGradient(
        begin: AlignmentDirectional.bottomStart,
        end: AlignmentDirectional.topEnd,
        tileMode: TileMode.repeated,
        colors: [
          Colors.yellow[800],
          Colors.yellow[700],
        ],
      ),
      boxShadow: <BoxShadow>[
        new BoxShadow(
            color: Colors.grey[50],
            //blurRadius: 0.3,
            blurRadius: 6.0,
            offset: new Offset(0.0, 4.0)
        )
      ]
  ),
  margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
  child: Material(
    color: Colors.transparent,
    //shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
    //elevation: 6.0,
    //shadowColor: Colors.grey[50],
    child: InkWell(
      splashColor: const Color(0x8034b0fc),
      onTap: () {},
      child: Container(
        //decoration: ,
        padding: EdgeInsets.all(16.0),
        child: Text(
          'Click',
          style: TextStyle(
            fontSize: 20.0,
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
 );
}

Upvotes: 5

Oliver Dixon
Oliver Dixon

Reputation: 7404

Simple splash effect widget I created that works perfect.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SplashEffect extends StatelessWidget {
  final Widget child;
  final Function onTap;

  const SplashEffect({Key key, this.child, this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: InkWell(
        borderRadius: BorderRadius.all(Radius.circular(16)),
        child: child,
        onTap: onTap,
      ),
    );
  }
}

Upvotes: 12

Gurleen Sethi
Gurleen Sethi

Reputation: 3502

I found the solution:

I need one Material for Inkwell, and one Material for elevation and rounded borders. The inner Material has a type of MaterialType.transparency so that it doesn't draw anything over the box decoration of its parent and still preserve the ink effect. The shadow and borders are controlled by outer Material.

Container(
      margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Material(  // <----------------------------- Outer Material
        shadowColor: Colors.grey[50],
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
        elevation: 6.0,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: AlignmentDirectional.bottomStart,
              end: AlignmentDirectional.topEnd,
              colors: [
                AppColors.pinkDark,
                AppColors.pink,
              ],
            ),
          ),
          child: Material(  // <------------------------- Inner Material
            type: MaterialType.transparency,
            elevation: 6.0,
            color: Colors.transparent,
            shadowColor: Colors.grey[50],
            child: InkWell(  //<------------------------- InkWell
              splashColor: Colors.white30,
              onTap: () {},
              child: Container(
                padding: EdgeInsets.all(16.0),
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.work,
                      size: 40.0,
                      color: Colors.white,
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Column(
                      children: <Widget>[
                        Text(
                          widget.title,
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );

Upvotes: 39

Related Questions