skip to Main Content

I have created this custom widget and wrapped with inkwell but its not showing inkwell effect else working fine..

and i am facing this issue so many times mainly when i wrapped inkwell to container.

Whats wrong with my c


class BoxTile extends StatelessWidget {
  final String title;
  final VoidCallback? onTap;

  const BoxTile({Key? key, required this.title, this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return InkWell(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: Colors.grey, width: 2),
          borderRadius: BorderRadius.circular(20),
        ),
        child: Center(
          child: Text(
            title,
            style: TextStyle(
              fontSize: 40,
              color:title=='X'? Colors.green:Colors.blue,
              fontWeight: FontWeight.bold
            )

          ),
        ),
      ),
    );
  }
}

2

Answers


  1. You can try wrapping your InkWell with a Material. InkWell uses the next Material widget to show the effect, which is why it does not work if there is none.

    Login or Signup to reply.
  2. You just need to add a few things:

    • Wrap your InkWell widget with a Material.
    • Set the color you want to your Material.
    • Remove the color from the Container.
    • Add the same borderRadius for Material and InkWell.

    Result:

    enter image description here

    Code:

    class BoxTile extends StatelessWidget {
      final String title;
      final VoidCallback? onTap;
    
      const BoxTile({Key? key, required this.title, this.onTap}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        const borderRadius = BorderRadius.all(Radius.circular(20));
        return Material(
          color: Colors.white,
          borderRadius: borderRadius,
          child: InkWell(
            onTap: onTap,
            borderRadius: borderRadius,
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey, width: 2),
                borderRadius: borderRadius,
              ),
              child: Center(
                child: Text(title,
                    style: TextStyle(
                        fontSize: 40,
                        color: title == 'X' ? Colors.green : Colors.blue,
                        fontWeight: FontWeight.bold)),
              ),
            ),
          ),
        );
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search