Flutter Question posted in
The official Flutter documentation can be found here.

not showing inkwell effect of my custom widget in flutter

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
            )

          ),
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    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. 0

    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