先生と生徒の会話形式で理解しよう

生徒

「Flutterで画面にアイコンを表示したいんですが、どうやって設定するんですか？」

先生

「FlutterではIconsという便利なクラスを使って、たくさんのアイコンを簡単に使うことができますよ。」

生徒

「色やサイズを変えたり、自分で画像のアイコンを使うこともできますか？」

先生

「もちろんできます！Flutterでのアイコン設定とカスタマイズの方法を一緒に見ていきましょう。」

1. Flutterのアイコン表示はIconsクラスが基本

Flutterでアイコンを使うには、まずIconsクラスを利用します。これはFlutterに最初から用意されているアイコンセットで、数百種類以上のアイコンを簡単に表示できます。

たとえば「ハート」や「カメラ」「メール」「設定」など、よく使うデザインが含まれており、すぐに使えるのが特徴です。以下のようにIconウィジェットと組み合わせて表示します。


Icon(Icons.favorite)

2. Flutterのアイコンの色やサイズを変更する

Iconウィジェットには、colorやsizeプロパティがあり、簡単に見た目を調整できます。初心者が最初につまずきやすい部分でもあるので、基本から確認しましょう。


Icon(
  Icons.star,
  color: Colors.amber,
  size: 48.0,
)

このように書くことで、黄色の星アイコンを48ピクセルのサイズで表示できます。色指定にはColorsクラスを使いましょう。

3. ボタンにアイコンを追加する方法

Flutterでは、アイコン単体だけでなく、ボタンにアイコンを付けて使うこともよくあります。IconButtonやElevatedButton.iconを使えば、すぐに実装可能です。


IconButton(
  icon: Icon(Icons.delete),
  onPressed: () {
    print("削除ボタンが押されました");
  },
)

また、文字とアイコンの両方を表示したいときはElevatedButton.iconを使います。


ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.send),
  label: Text("送信"),
)

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. 独自の画像をアイコンとして使う方法

Flutterには標準アイコン以外にも、自分で用意した画像をアイコンとして表示することも可能です。たとえば、PNGやSVG画像を使ってオリジナルデザインのUIを作成できます。

画像を使うにはImage.assetウィジェットを利用します。まず、画像をassets/imagesなどのディレクトリに置き、pubspec.yamlに登録する必要があります。


Image.asset(
  'assets/images/custom_icon.png',
  width: 32,
  height: 32,
)

画像を配置したあとは、Flutterのホットリロードですぐに表示できます。

5. SVG形式のアイコンを使う方法（flutter_svg）

よりスケーラブルなアイコンを使いたい場合、SVG形式をFlutterで扱うにはflutter_svgパッケージを使用します。これはベクター形式なので、拡大縮小しても画質が劣化しません。

まず、pubspec.yamlに以下を追加して依存関係に設定します。


dependencies:
  flutter_svg: ^1.1.6

そして以下のように使います。


import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/icons/sample_icon.svg',
  width: 40,
  height: 40,
)

SVGは高解像度の画面でもくっきり表示できるため、プロフェッショナルなアプリ開発ではよく使われます。

6. アイコンにアニメーションをつけるには？

アイコンに動きを加えたい場合、FlutterではAnimatedIconを使うことができます。これはボタンの状態などに応じてアイコンがアニメーションで変化するものです。

例えば、「再生」と「停止」を切り替えるようなUIで活用できます。ただし、これは事前に用意されたアニメーションのみ利用可能です。


AnimatedIcon(
  icon: AnimatedIcons.play_pause,
  progress: animationController,
)

使うにはAnimationControllerとの連携が必要なので、Flutterの状態管理にある程度慣れてからチャレンジすると良いでしょう。

7. Flutterで使える代表的なアイコン一覧

FlutterのIconsクラスには、以下のような代表的なアイコンが含まれています。

Icons.home：ホームアイコン
Icons.search：検索アイコン
Icons.settings：設定アイコン
Icons.camera_alt：カメラ
Icons.email：メール
Icons.phone：電話

これらはどれもFlutterに最初から含まれており、インストール不要ですぐに使えるため、UI設計の初期段階でも非常に役立ちます。

8. Flutterのテーマでアイコンカラーを一括設定する方法

Flutterではアプリ全体のテーマを指定することで、アイコンの色を統一することが可能です。例えば、アプリ全体でアイコンを白にしたいときは次のように設定します。


MaterialApp(
  theme: ThemeData(
    iconTheme: IconThemeData(
      color: Colors.white,
      size: 30,
    ),
  ),
  home: MyHomePage(),
)

これにより、個別にcolorを指定しなくても、すべてのIconウィジェットに適用されます。

まとめ

Flutterのアイコン設定とカスタマイズを振り返る

この記事では、Flutterにおけるアイコンの基本的な使い方から、色やサイズの変更、ボタンへの組み込み、独自画像やSVGアイコンの利用方法、さらにはアニメーションやテーマ設定による一括管理まで、幅広く解説してきました。 FlutterのUI開発においてアイコンは欠かせない要素であり、画面の分かりやすさや操作性、デザインの印象を大きく左右します。初心者の段階でアイコンの扱い方を理解しておくことは、 Flutterアプリ開発全体の理解を深めるうえでも非常に重要です。

まず基本として、FlutterではIconsクラスを使うことで、多くの標準アイコンを簡単に表示できることを学びました。これらのアイコンはFlutterに最初から含まれているため、追加の設定や画像準備を行わなくてもすぐに使える点が大きな利点です。ホーム、検索、設定、メールなど、アプリで頻繁に使われるアイコンが揃っており、 UI設計の初期段階でも安心して利用できます。

次に、Iconウィジェットのcolorやsizeプロパティを使って、アイコンの見た目を柔軟に調整できることを確認しました。ほんの少し色やサイズを変えるだけでも、画面の印象は大きく変わります。ユーザーにとって見やすく、直感的に操作できるUIを作るためには、こうした細かな調整がとても重要になります。

ボタンや画像アイコンで広がる表現の幅

記事の中盤では、IconButtonやElevatedButton.iconを使ったボタンとアイコンの組み合わせについても紹介しました。文字だけのボタンよりも、アイコンを加えることで操作の意味が伝わりやすくなり、ユーザー体験の向上につながります。削除、送信、追加といった操作は、アイコンを見るだけで内容を理解できるため、多くのFlutterアプリで積極的に使われています。

また、標準アイコンだけでなく、PNGなどの画像をアイコンとして使う方法も解説しました。オリジナルデザインのアプリや、ブランドイメージを大切にしたUIでは、独自アイコンの利用が欠かせません。 Image.assetを使った画像表示は、 Flutter初心者でも比較的理解しやすく、実践しやすい方法です。

さらに、SVG形式のアイコンを使う方法として、 flutter_svgパッケージの利用も紹介しました。 SVGは拡大縮小しても画質が劣化しないため、さまざまな画面サイズや高解像度端末に対応したアプリ開発に向いています。デザイン性を重視するFlutterアプリでは、SVGアイコンの活用が大きな武器になります。

テーマ設定とアニメーションで一歩先のUIへ

記事の後半では、アプリ全体のテーマを使ってアイコンの色やサイズを一括管理する方法を学びました。 ThemeDataのiconThemeを設定することで、個別に指定しなくても統一感のあるデザインを保つことができます。アプリの規模が大きくなるほど、このような一括管理の考え方は重要になります。

また、AnimatedIconを使ったアイコンのアニメーションについても触れました。状態に応じてアイコンが変化するUIは、操作のフィードバックとして非常に効果的です。少し難易度は上がりますが、Flutterの状態管理と組み合わせることで、より動きのある魅力的なアプリを作ることができます。

まとめ用サンプル：基本的なアイコン指定


Icon(
  Icons.home,
  color: Colors.blue,
  size: 32,
)

このように、Flutterではシンプルな記述でアイコンを表示し、色やサイズを直感的に調整できます。まずはこの基本形をしっかり身につけ、徐々にボタンや画像、テーマ設定へと応用していくのがおすすめです。

先生と生徒の振り返り会話

生徒

「Flutterのアイコンって、思っていた以上に簡単に使えるんですね。色やサイズを変えるだけでも、画面の印象がかなり変わるのが分かりました。」

先生

「その通りです。アイコンは小さな要素ですが、 UI全体の分かりやすさや使いやすさに大きく影響します。」

生徒

「標準アイコンだけでなく、画像やSVGも使えると知って、自分のアプリのデザインの幅が広がりそうだと思いました。」

先生

「そうですね。テーマ設定やアニメーションまで使えるようになると、より本格的なFlutterアプリに近づいていきますよ。」

生徒

「まずはIconsクラスを使った基本から練習して、少しずつ応用にも挑戦してみます。」

先生

「その進め方が一番です。今日学んだアイコンの使い方を活かして、ぜひFlutter開発を楽しんでください。」

Flutterのアイコン設定・カスタマイズ方法を詳しく解説！初心者でも使えるIconsの基本