Change color property of a material from its parent via InkWell onTap

Question

I've created a widget with an InkWell child, and I want to change the color of the widget when the InkWell child is being tapped. Currently I have a _pressed variable in the InkWell class to control the color of the widget:

class ButtonA extends StatefulWidget {
   ButtonA();
   @override
   State createState() => new ButtonAState();
}

class ButtonAState extends State<ButtonA> {
   bool _pressed = false;
   Widget build(BuildContext context){
      return new Expanded(
        child: new Material(
            color: _pressed ? Colors.greenAccent : Colors.redAccent,
            child: new InkWell(
                onTap: () => (
                   this.setState((){
                   _pressed = true;
               })),
            ),
          ),
        ),
       }

And in the parent, I just import ButtonA and create it like:

new Button()

Due to an increasing number of functions that I would love to link to this tapping behavior, I want to be able to change the button color in the parent class instead. I am thinking of passing the tap function into the Button class, so to have something like:

class ButtonA extends StatefulWidget {
   VoidCallback _tap;

   ButtonA(this._tap);
   @override
   State createState() => new ButtonAState();
}

and the InkWell will be:

child: new InkWell(onTap: () => _tap())

In the parent class, I will have a tap function that manipulate button colors and do other stuff.

How should I pass the state of the button to its parent so that maybe I can do something like

  this.colors = Colors.white

in the parent class? Is it possible?

As u mentioned, use can use callbacks to update/notify the parent class..https://stackoverflow.com/a/51798698/5305962 — Dinesh Balasubramanian, Sep 21 '18 at 16:30
Not so important.. but it might help you.. You can use `InkWell(onTap: () => _tap())` as `InkWell(onTap: _tap)`..refer https://stackoverflow.com/a/52409286/5305962 — Dinesh Balasubramanian, Sep 21 '18 at 16:31

score 0 · Answer 1 · answered Sep 21 '18 at 14:10

You can do something like this:

    class ButtonA extends StatefulWidget {

        VoidCallback tap;
        Color defaultColor;
        Color pressedColor;
        ButtonA({this.tap, this.pressedColor, this.defaultColor});

       ButtonA();
       @override
       State createState() => new ButtonAState();
    }

    class ButtonAState extends State<ButtonA> {
       bool _pressed = false;
       Widget build(BuildContext context){
          return new Expanded(
            child: new Material(
                color: _pressed ? widget.pressedColor : widget.defaultColor,
                child: new InkWell(
                    onTap: () { 
                        widget.tap();
                        this.setState((){
                       _pressed = true;
                   });

                   },
                ),
              ),
            ),
           }

Usage :

    ButtonA(
        tap: () {

           //your logic from your parent
        },

        defaultColor: Colors.white,
        pressedColor: Colors.blue

    );

This is great yet I want to set the state via onTap in the parent class. So instead of having this.setState((){ function}) in the child class, I want to pass the state to the parent class and set the state there. Would it be doable? — saladham, Sep 22 '18 at 01:12
When I try this I get asked to remove unreachable code, can you assist? https://pastebin.com/Yapy2w28 — Anteino, Feb 23 '22 at 08:31

Change color property of a material from its parent via InkWell onTap

1 Answers1