【Flutter】画像をボタンみたく動作させる

imagesディレクトリを作成

プロジェクトファイルの直下にimagesディレクトリを作成して、画像を置いておきます。

pubspec.yamlに設定を追記

pubspec.yaml

flutter:
  assets:
   - images/

upgradeします。

$ flutter pub upgrade

画像を配置する

画像をボタンのように動作させる方法は2種類。
GestureDetactorかInkwellを使用します。
どちらもタップした際の動作を設定できるので、ボタンのように動作するが、個人的にはスプラッシュ効果があるInkwellの方がボタンとしてはいい感じ。
詳しくはこちらのサイトを見るとわかりやすく書いていただいてます。

GestureDetector

GestureDetactor(
  onTap: () {
    // タップ時の動き
  },
  child: Image.asset('imageディレクトリに置いた画像のパス'),
)

Inkwell

Ink.image(  
  width: 100,  
  height: 30,  
  image: const AssetImage('imageディレクトリに置いた画像のパス'),  
  child: InkWell(  
    borderRadius: BorderRadius.circular(5),  
    onTap: () {},  
    splashColor: const Color(0xff000000).withAlpha(30) 
  ),  
)

完成

例としてLINEのログインボタンを使用しました。

参考
https://migisanblog.com/flutter-inkwell-gesturedetector/