[Flutter]InkWellを円(circle)にするには？

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

InkWellを円にする方法を紹介します

方法
使用例

方法

InkWellを円にするには、引数「customBorder」を使います。

具体的には、InkWellの引数「customBorder」にCircleBorderを指定します。

InkWell(
  customBorder: CircleBorder(),
  onTap: () {},
  child: Widget(),
),

引数「customBorder」を使えば、InkWellを円にすることが出来ます。

使用例

  var _count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          customBorder: CircleBorder(),
          onTap: () {
            setState(() {
              _count++;
            });
          },
          child: Container(
            width: 200,
            height: 50,
            child: Text('$_count'),
            alignment: Alignment.center,
          ),
          splashColor: Colors.pink,
        ),
      ),
    );
  }