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

2023-01-192023-02-09

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

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

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

この記事で分かること！

Icons classって何？
Icon classって何？
Iconの効率的な調べ方

ちなみに、Flutterのスキルを０から効率的に伸ばす方法は、仕事として実務を経験することです。そして、最速で転職・就職・副業するには学習をどんどん進め、ポートフォリオを最優先で完成させましょう！応募できそうなFlutter案件をチェックすると必要なスキルも分かり学習に身が入ります！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でよく使うプロパティ