[Flutter]Container(コンテナ)をボタンとして (as button)使うには？

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

Containerをボタンとして使う方法を紹介します。

方法

Containerをボタンとして使うには、まずGestureDetectorもしくはInkWellの「child」にContainerを指定します。

そして、GetureDetectorもしくは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,
        ),
      ),
    );
  }