Flutter onPressed Material答案

【问题标题】：Flutter onPressed MaterialFlutter onPressed Material
【发布时间】：2019-08-21 10:57:45
【问题描述】：

我正在尝试为我使用 Flutter 创建的游戏实现 onPressed 函数。如果我使用 RaisedButton 则 onPressed 有效，但由于我想要一张图片，所以我必须使用 Material：

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

这给了我以下错误：

onPressed 参数未定义。

整个方法构建：

  @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,
            )
          ],
        ));
  }

如何在 Material 上实现 onPressed 函数？

【问题讨论】：

标签： flutter

【解决方案1】：

您可以在 Material 小部件中使用 GestureDetector 或 InkWell 小部件。

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

更多信息在这里：

【讨论】：

【解决方案2】：

diegodeveloper 是正确的，但我个人会使用InkWell，因为它能够显示涟漪效应。

这是使用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),
  ),
)

【讨论】：