「Iconで使用できるアイコンの探し方が知りたい」
今回はこんな悩みを解消します。
Iconウィジェットを使用すれば手軽にFlutterアプリでアイコンを表示できます。一方でIconで表示できるアイコンの探し方が分からない、Iconの引数であるIconDataクラスが良く分からない方は少なくないと思います。
これらの点を含めてIconで表示できるアイコンの探し方とIconDataとは何かについて解説していきます！
アイコンの表示方法
まず初めにIconでアイコンを表示する方法について解説しておきます。
アイコンを表示するにはIconのコンストラクタに表示したいアイコンのIconDataを渡します。
Icon(
Icons.heart_broken_outlined,
),画像のサンプルコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyWidget(),
);
}
}
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.heart_broken,
size: 150,
),
Icon(
Icons.heart_broken_outlined,
size: 150,
),
Icon(
Icons.heart_broken_rounded,
size: 150,
),
Icon(
Icons.heart_broken_sharp,
size: 150,
),
],
),
),
);
}
}
IconDataとは？
先ほどIconのコンストラクタに渡したIcons.heart_broken_outlinedはIconsの列挙型でIconData型になります。そしてIconDataとは「アイコンを描画するためのデータが詰まっているクラス」のことです。
IconDataに使用される代表的なウィジェットはIconsになりますが、他にもCupertinoIconsやFontAwesomeIconsなどがあります。
それではそれぞれのアイコン(IconData)の探し方ついて解説していきます。
アイコンの探し方
Iconsのアイコン一覧
IconsはGoogle Fontsが提供しているマテリアルデザインによるアイコンです。使用できるアイコンはAPIドキュメントまたはGoogle Fonts公式から一覧できます。
Google Fonts公式サイトでは検索エンジンやフィルターを使って手軽にアイコンを見つけられます。
CupertinoIconsのアイコン一覧
CupertinoIconsはクパチーノデザインによるアイコンです。使用できるアイコンはAPIドキュメントから一覧できます。
CupertinoIconsを使用するにはcupertinoライブラリをインポートする必要があります。
FontAwesomeIconsのアイコン一覧
FontAwesomeIconsはFont Awsomeが提供しているアイコンです。使用できるアイコンはAPIドキュメントまたはFont Awsome公式から一覧できます。
FontAwesomeIconsを使用するにはfont_awesome_flutterパッケージをインポートする必要があります。
まとめ
今回はIconで使用できるアイコンの探し方について解説しました。
IconウィジェットのコンストラクタにはIconDataクラスのIcons、CupertinoIcons、FontAwesomeIconsなどを使用できます。