[Flutter]ボタンのタップエフェクトを無効にする方法

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

ボタンのタップエフェクトを無効にする方法を紹介します。

方法

１部

１部のボタンだけタップによるエフェクトを無効にするには、「Theme」を使います。

まず、無効にしたいボタンを、Themeの「child」に指定します。

そして、「Theme」の引数「data」に指定する「ThemData」の「splashColor」プロパティと「highlightColor」プロパティを「Colors.transparent」にします。

Theme(
  data: ThemeData(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent
  ),
  child: /* ボタン*/
)

全て

全てのボタンのタップエフェクトを無効にするならば、「MaterialApp」の引数「theme」を使います。

具体的には、引数「theme」に指定する「ThemeData」の「splashColor」プロパティと「highlightColor」プロパティに「Colors.transparent」を指定します。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent
      ),
      home: Scaffold(
        body: Test(),
      ),
    );
  }