【Flutter】アイコン(icon)リストの効率的な調べ方

Flutterのアイコン（icon）を一覧で知りたい

そこで、今回はFlutterのアイコンの効率的な調べ方を紹介します。

不明点などありましたら、お気軽にお問い合わせ下さい。

【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でよく使うプロパティ

まとめ：Flutterのアイコンを効率的に探して生産性をアップさせよう！

今回はFlutterのアイコンの効率的な調べ方を紹介しました。

Flutterのアイコンを効率的に探してアプリ開発の生産性をアップしていきましょう！

Flutterエンジニアになるには？

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

あわせて読みたい

【2023】Flutter学習ロードマップ！初心者向け勉強法を0から解説！ Flutterでアプリ開発をしたい！けど、ベストなFlutterの学習方法や進め方が分からない。 Flutterの学習方法・進め方を知ることは重要です。Flutterの学習方法を間違える...

Flutter を動画で学ぶ（Udemy）

あわせて読みたい

【2023】Flutter学習のUdemyおすすめコース7選(初心者向け) UdemyでFlutter学習のおすすめコースを知りたい！ そこで、今回は初心者向けのFlutterのUdemyおすすめコースについて体験談を交えて、解説します。 この記事はこんな人...

Flutter をスクールで学ぶ

あわせて読みたい

Flutterスクール3選!【失敗しない選び方】SE歴13年目が解説！ Flutterでスマホアプリ開発をしたい！けど、挫折気味・・・ Flutterが学べるプログラミングスクールを知りたい！どこが良いのかな？ プログラミング初心者は疑問やエラ...

Flutterの仕事を探す

あわせて読みたい

【2023】Flutterエンジニア向けフリーランス求人案件おすすめサービス４選 副業でFlutterの仕事をしたい！どこのサイトでFlutter求人が多いのか知りたい！どんなスキルや経験が必要なのか知りたい！ そこで、今回はFlutterエンジニアの求人案件...

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

あわせて読みたい

【Flutter入門ガイド2023】知識ゼロから使い方・全体像が分かる！ Flutterの全体像がわからない。 Flutterの学習すべきことを知りたい。 新しいことを学習する際は全体像を捉えることが重要です。「今はここを学習してるんだな。」と実...