【Flutter】Icon|アイコンの表示・アイコンに影をつける

今回はIcon の基本的な使い方を紹介します。

Icon を使えばMaterial Design(マテリアルデザイン)のマテリアルアイコンをFlutterで使用できます。

\ 世界最大級のオンライン学習サービス /

目次

Iconの使い方

Icon(
  Icons.audiotrack,
  color: Colors.blue,
  size: 100.0,
),

Icon のコンストラクタでIcons を使って表示したいアイコンを指定します。

Iconsで使用できるアイコンはドキュメントまたはGoogle Fonts Iconsから確認できます。アイコンの色やサイズはそれぞれcolor size で指定します。

アイコンに影をつける

Icon(
  Icons.audiotrack,
  color: Colors.blue,
  size: 100.0,
  shadows: [
    Shadow(
      blurRadius: 20,
      offset: Offset(10, 10),
      color: Colors.grey,
    )
  ],
),

shadows でアイコンに影をつけられます。

アイコンの「表示スタイル」を変更

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(
      Icons.home,
      color: Colors.blue,
      size: 100.0,
    ),
    Icon(
      Icons.home_outlined,
      color: Colors.blue,
      size: 100.0,
    ),
    Icon(
      Icons.home_rounded,
      color: Colors.blue,
      size: 100.0,
    ),
    Icon(
      Icons.home_filled,
      color: Colors.blue,
      size: 100.0,
    ),
  ],
),

同じアイコンテーマでも「アウトライン」や「丸型」でアイコンを表示できます。アイコンによって対応しているスタイルが異なります。

他にどんなスタイルがあるかチェックするにはIcons.〇〇の後に _ を打ちます。

一緒に読みたい

参考

  • URLをコピーしました!
目次