【Flutter】SNSアイコンを表示|Twitter・Instagramロゴなど

今回はTwitterやInstagramなどのロゴをFlutterで表示する方法を紹介します。

Font Awesomeのアイコンフォントが利用できるfont_awesome_flutterパッケージを使用します。

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

目次

事前準備|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,
  color: Colors.orange,
  size: 100,
),

FontAwesomeIconsでFont Awesomeのアイコンフォントを指定しFaIconでラップすればロゴを表示できます。

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

Twitter

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(
      FontAwesomeIcons.twitter,
      color: Colors.lightBlueAccent,
      size: 100,
    ),
    Icon(
      FontAwesomeIcons.twitterSquare,
      color: Colors.lightBlueAccent,
      size: 100,
    ),
  ],
),

TwitterのSNSアイコンには「twitter(左)」と「twitterSquare(右)」があります。

Instagram

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(
      FontAwesomeIcons.instagram,
      color: Colors.purple,
      size: 100,
    ),
    Icon(
      FontAwesomeIcons.instagramSquare,
      color: Colors.purple,
      size: 100,
    ),
  ],
),

InstagramのSNSアイコンには「instagram(左)」と「instagramSquare(右)」があります。

Facebook(Messengerあり)

Wrap(
  spacing: 50,
  runSpacing: 50,
  children: [
    Icon(
      FontAwesomeIcons.facebook,
      color: Colors.blue,
      size: 100,
    ),
    Icon(
      FontAwesomeIcons.facebookSquare,
      color: Colors.blue,
      size: 100,
    ),
    Icon(
      FontAwesomeIcons.facebookF,
      color: Colors.blue,
      size: 100,
    ),
    Icon(
      FontAwesomeIcons.facebookMessenger,
      color: Colors.blue,
      size: 100,
    ),
  ],
),

FacebookのSNSアイコンには「facebook(左上)」、「facebookSquare(右上)」、「facebookF(左下)」、「facebookMessenger(右下)」があります。

一緒に読みたい

参考

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