7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

FlutterのChipをいい感じの大きさに調整する

Posted at

やりたいこと

FlutterのChipを使用していたが、余白が多すぎて使いづらい。。。

上下になんかmargin設定されてるし、内部paddingも多すぎない?
Chipなんていっぱい並べたいのに、こんなんじゃ場所取りすぎる!!

Chip(
  backgroundColor: Colors.green[50],
  label: Text(tag,
    style: TextStyle(
      fontSize: 11,
      color: Colors.green[800],
      fontWeight: FontWeight.bold
    )
  ),
)

image.png

結論

以下のように設定したらいい感じになった。

Chip(
  backgroundColor: Colors.green[50],
  label: Text(tag,
    style: TextStyle(
      fontSize: 11,
      color: Colors.green[800],
      fontWeight: FontWeight.bold
    )
  ),
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // 追加:上下の余計なmarginを削除
  labelPadding: EdgeInsets.symmetric(horizontal: 1), // 追加:文字左右の多すぎるpaddingを調整
  visualDensity: VisualDensity(horizontal: 0.0, vertical: -4), // 追加:文字上下の多すぎるpaddingを調整
)

image.png

visualDensityを設定する事に気づけず、結構悩んだので備忘。

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?