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

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の入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次