[Flutter]Containerにタップ処理(ontap)を追加するには？

どうも、ちょげ(@chogetarou)です。

Containerにタップ処理を追加する方法を紹介します。

方法

Containerにタップ処理を追加するには、まずContaienrをGestureDetectorもしくはInkWellの「child」に指定します。

そして、GestureDetectorもしくはInkWellの引数「onTap」にタップされた時に呼び出す関数を指定します。

タップの処理自体は、関数の「{}」内に追加します。

GestureDetector(
  onTap: () {/*タップ処理*/},
  child: Container(),
),

InkWell(
  onTap: () {/*タップ処理*/},
  child: Container(),
),

使用例

  var _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () {
            setState(() {
              _count++;
            });
          },
          child: Container(
            width: 200,
            height: 200,
            child: Center(
              child: Text('$_count'),
            ),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.pink),
            ),
          ),
          splashColor: Colors.pink,
        ),
      ),
    );
  }