Flutterのアイコン(icon)を一覧で知りたい
そこで、今回はFlutterのアイコンの効率的な調べ方を紹介します。
不明点などありましたら、お気軽にお問い合わせ下さい。
- Icons classって何?
- Icon classって何?
- Iconの効率的な調べ方
ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。
- 学習の計画
- スケジュール管理
- ポートフォリオ作成時に技術選定 など
初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。
【Flutter】アイコンリストの効率的な探し方

Flutterのアイコンは以下のサイトで探すことができます。
Material Design(マテリアルデザイン)アイコン全てのリストはこちらで確認できます。
また、Flutterには「font_awesome_flutter」と呼ばれる、Font Awesomeアイコンを使用するためのライブラリもあります。これを使用することで、さらに多くのアイコンを使用することができます。Font Awesomeで使用可能なアイコンのリストはこちらで確認できます
【Flutter】Icons class/Icon classとは?
Icons class/Icon classは、アイコンを表示させるウィジェットです。
Icons classとは
Identifiers for the supported Material Icons.Use with the Icon class to show specific icons.
(直訳)サポートされているマテリアル アイコンの識別子。 Icon クラスと共に使用して、特定のアイコンを表示します。
引用:Flutter公式サイト「icons class」
Icon classとは
A graphical icon widget drawn with a glyph from a font described in an IconData such as material’s predefined IconDatas in Icons.
(直訳)icons 内のマテリアルの事前定義された IconData など、IconData で記述されたフォントからのグリフで描画されたグラフィカル アイコン ウィジェット。
引用:Flutter公式サイト「icon class」
【Flutter】アイコンのサンプルコードと使い方を解説(コピペOK)

Icons class
サンプルコードは以下の通りです。コピペでそのまま使えます。
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(IconDemo());
class IconDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('アイコンデモ'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const <Widget>[
Icon(
Icons.sunny,
color: Colors.orange,
size: 150.0,
),
Icon(
Icons.cloud,
color: Colors.grey,
size: 150.0,
),
Icon(
Icons.umbrella,
color: Colors.blue,
size: 150.0,
),
],
),
)
),
);
}
}
Iconでよく使うプロパティ
プロパティ | 内容 |
---|---|
icons | アイコンを指定 |
color | アイコンの色を指定 |
size | アイコンのサイズを指定 |
まとめ:Flutterのアイコンを効率的に探して生産性をアップさせよう!
今回はFlutterのアイコンの効率的な調べ方を紹介しました。
Flutterのアイコンを効率的に探してアプリ開発の生産性をアップしていきましょう!
Flutterエンジニアになるには?
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけ:Flutter入門の完全ガイド

Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
画面レイアウト
ボタン
- ボタン(ElevatedButton、TextButton、OutlinedButton、IconButton、FloatingActionButton)
- Flutterのアイコンの探し方
入力・出力
- 文字・数値の入力(Text Field)
- 文字・数値の表示(Text)
- 画像の表示(Images)
- スクロール可能リスト(ListView.builder)
- スクロール可能マス目レイアウト(GridView.builder)
ページ遷移
状態管理
- 状態(State)管理の基本(Stateless Widget・Stateful Widget)
非同期処理
- 非同期処理・同期処理(Future)
- ローカルデータベース(SQLite)
- グラフ①(fl_chart)
- グラフ②(syncfusion_flutter_charts)
- カレンダーから日付取得①(syncfusion_flutter_datepicker)
- カレンダーから日付取得②(month_picker_dialog_2)