CODEWITHSUNDEEP
flutter
Europa
Europa

Reputation: 1284

Flutter onPressed Material

I'm trying to implement a onPressed function for a game I'm creating using Flutter. If I use RaisedButton then onPressed works, but since I want to have a image then I have to use Material:

              child: Material(
                elevation: 4.0,
                onPressed: buttonsList[i].enabled
                    ? () => playGame(buttonsList[i])
                    : null,
                color: Colors.green,
                child: Image.asset(buttonsList[i].icon),
              ),

This gives me the following error:

The parameter onPressed isn't defined.

The entire method build:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("Cat Attack"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: GridView.builder(
                padding: const EdgeInsets.all(10.0),
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4, // 4 columns of board buttons
                    childAspectRatio: 1.0,
                    crossAxisSpacing: 9.0,
                    mainAxisSpacing: 9.0),

                // Game board loop
                itemCount: buttonsList.length,
                itemBuilder: (context, i) => SizedBox(
                  width: 100.0,
                  height: 100.0,

                  child: Material(
                    elevation: 4.0,
                    onPressed: buttonsList[i].enabled
                        ? () => playGame(buttonsList[i])
                        : null,
                    color: Colors.green,
                    child: Image.asset(buttonsList[i].icon),

                  ),

                ),
              ),
            ),

            RaisedButton(
              child: new Text(
                "Reset",
                style: new TextStyle(color: Colors.white, fontSize: 20.0),
              ),
              color: Colors.red,
              padding: const EdgeInsets.all(20.0),
              onPressed: resetGame,
            )
          ],
        ));
  }

How can I implement a onPressed function on Material?

Upvotes: 0

Views: 1100

Answers (2)

CopsOnRoad
CopsOnRoad

Reputation: 267484

diegodeveloper is correct but I would personally use InkWell because it is capable of showing ripple effects.

Here is the solution using InkWell. 

child: Material(
  elevation: 4.0,
  color: Colors.green, // don't use color in any child widget of InkWell otherwise ripple effect won't be shown
  child: InkWell(
    splashColor: Colors.green[900], // give any splashColor you want
    onTap: buttonsList[i].enabled
        ? () => playGame(buttonsList[i])
        : null,
    child: Image.asset(buttonsList[i].icon),
  ),
)

Upvotes: 0

diegoveloper
diegoveloper

Reputation: 103401

You can use GestureDetector or InkWell widget inside your Material widget.

    Material(
         color: Colors.green,
        child: GestureDetector(
          onTap: buttonsList[i].enabled
                      ? () => playGame(buttonsList[i])
                      : null,
                       child: Image.asset(buttonsList[i].icon),
        ),
      )

More info here:

Upvotes: 3

Related Questions