【Flutter】Font Awesomeのアイコンフォントを使用する

今回はFont Awesomeのアイコンフォントを使用できるFlutterパッケージfont_awesome_flutterを紹介します。

Font Awesome公式から使用できるアイコンフォントを確認できます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|font_awesome_flutterの導入

flutter pub add font_awesome_flutter
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

font_awesome_flutterを導入します。

Font Awesomeのアイコンフォントを表示

FaIcon(
  FontAwesomeIcons.google,
),

FaIconの引数にFontAwesomeIcons渡してアイコンを表示できます。

FontAwesomeIconsで使用できるアイコンは「Font Awesome公式」または「ドキュメント」から確認できます。

色・サイズを変更

FaIcon(
  FontAwesomeIcons.google,
  color: Colors.orange,
  size: 100,
),

アイコンフォントの色とサイズはそれぞれcolorsizeで指定できます。

開発者用のラベルをアイコンにつける

FaIcon(
  FontAwesomeIcons.google,
  semanticLabel: 'Google Logo',
),

semanticLabelでアイコンフォントにユーザーに表示されないラベルを付けられます。

開発者がアイコンフォントのイメージが浮かびにくい時などのメモとして使用できます。

IconDataとして使用できる

Icon(
  FontAwesomeIcons.google,
),

FontAwesomeIconsIconDataなのでIconの引数としても使用できます。

サンプルコード

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FlutterZero'),
        ),
        body: MyCustomApp(),
      ),
    );
  }
}

class MyCustomApp extends StatelessWidget {
  const MyCustomApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FaIcon(
        FontAwesomeIcons.google,
        color: Colors.orange,
        size: 100,
        semanticLabel: 'Google Logo',
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次