【Flutter】InputChipウィジェットの使用方法

Material Designのchipのページには以下のようなボタンデザインが紹介されている。

material design: chip

このボタンを作成するためのFlutterのウィジェットはInputChipなのだが、デフォルトのままを使おうとすると、Material Designのページのボタンと微妙にデザインが異なってしまう。

デフォルトのInputChipボタン

見ての通り、アイコンのサイズや、クローズボタンの背景などが無い。コードは以下。

本エントリではMaterial Designページに近い見た目のボタン作成方法を紹介する。

完成品

まず完成品の見た目から示す。

完成品見た目

結構近くなったと思う。

では次にコードを示す。

コード

デフォルトから変えている点は以下。

• InputChip内の左のアイコン：デフォルトだとサイズが少し大きめだったので、sizeプロパティを20に指定した。

• InputChip内の右のcloseアイコン：CircleAvatarでラップして丸く背景をつけた。またIconのサイズも16に指定した。