【Flutter】チップを使って3パターンのアクションを実装する

Flutterアプリのチップはリストのフィルタリングやプロフィールの画面などで
ボタンとは違ったデザインでスペースを取らないUIとして便利かと思います。
更にチップに何かしらの処理を実行したい場合もあるかと思います。
今回は3パターンのアクションを実装しました。

◇動作イメージ

1.チップが押されたら画面遷移する

InputChipを使用して、チップがタップされたら画面遷移を行うようにします。

2.チップが押されたら画面内の処理を行う

InputChipを使用して、チップがタップされたときの処理を実装します。

3.チップのアイコン部分が押されたら画面内の処理を行う

ContainerにTextとIconを組み込み、チップの見た目を模倣します。
アイコン部分のイベントリスナーを実装します。

gist0399ce8a237145f1aff75ae931d66acf

この記事がお役に立てていたらうれしいです。