How to disable Inkwell image button in flutter-CodePudding

I would like to make the inkwell image button to be disabled. I can disable onTap event, but can't make gray like disabled button. I tried with adding this code

decoration: new BoxDecoration(color:Colors.grey.withOpacity(0.6)),

But it doesn't work as I want.

My code:

 child: Container(
              decoration:
                  new BoxDecoration(color: Colors.grey.withOpacity(0.6)),
              child: Material(
                //elevation: 4.0,
                clipBehavior: Clip.none,
                color: Colors.black,
                child: Stack(
                  alignment: Alignment.center,
                  fit: StackFit.passthrough,
                  children: [
                    Ink.image(
                      image: AssetImage(ihaveheard_imagepath),
                      fit: BoxFit.cover,
                      width: MediaQuery.of(context).size.width / 4 * 3,
                      height: MediaQuery.of(context).size.width / 6,
                      child: InkWell(onTap: () {}),
                    ),
                    Align(
                      alignment: Alignment.center,
                      child: Padding(
                        padding: EdgeInsets.all(8.0),
                        child: InkWell(
                          child: Text(
                            LocaleKeys.ihaveheard,
                            style: TextStyle(
                                fontSize:
                                    MediaQuery.of(context).size.width / 30,
                                color: Colors.white),
                          ).tr(),
                          onTap: () {
                            ihaveheard_imagepath =
                                "assets/images/greenbutton.png";

                            setState(() {});
                          },
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),

CodePudding user response：

You can use IgnorePointer as parent widget to prevent tab event.

IgnorePointer(
  ignoring: disableBtn, //true, false
  child: yourWidget()

You can pass null to decoration to show default based on tappable state

Container(
 decoration: disableBtn? BoxDecoration(...): null,
 .....
)

CodePudding user response：

child: IgnorePointer( ignoring: disableBtn, //true or false

          child: Container(
            foregroundDecoration: disableBtn 
                ? BoxDecoration( //this can make disabled effect
                    color: Colors.grey,
                    backgroundBlendMode: BlendMode.lighten)
                : null,