Flutter: Iconを自作する

プログラミング
スポンサーリンク




Flutterで、Iconクラスに用意されていないアイコンを作成する際、少々手間取ったので備忘録として残しておきます。

 

スポンサーリンク

やること

Flutterで、Iconを自前で用意して表示する

 

ゴール

ListTileに、下記のようなアイコンを表示します。

ところどころ変なのはご愛嬌

 

用意しておくもの

設定したいアイコンのsvgファイル(画像を自前で用意する場合)

↓下記サイトにて、拡張子がpingなどの画像ファイルをsvgに変換できます。

PNG SVG 変換。オンライン フリー — Convertio
数秒でPNGをSVGファイルへ変換する最良の方法。 100%無料で、安全、そして使いやすい! Convertio — いかなるファイルのどんな問題も解決する高度なオンラインツール。

 

やり方

今回は以下のステップで、Iconを生成して表示します。

  1. https://www.fluttericon.com から必要なファイルをダウンロード
  2. Flutterプロジェクトにファイルを組み込む
  3. アプリを再インストールする
  4. コーディングして表示する

 

必要なファイルをダウンロードする

① 下記サイトにアクセスする

FlutterIcon - Flutter custom icons generator
Build custom Flutter icons from popular icon sets or your own images.

 

↓開いた直後の画面

 

② – 1 アイコンを選択する … 自前で用意した画像を使用する場合

「Drag custom SVG icons or SVG font here」と記述されている場所に、SVGファイルをドラッグ&ドロップします

↓前

↓後

 

「Custom Icons」にアイコンが表示されるので、選択します。

↓選択した状態(赤丸で囲まれる)

 

② – 2 アイコンを選択する … 用意されているものを使用する場合

ダウンロードできるアイコンの一覧から、使用したいものを選択します。

 

③ アイコンに名前をつける

上部メニュー「MyFlutterApp」に、アイコンにつけたい名前を入力します。

↓入力例(今回は、WebLinkIcons)

 

④ ファイルをダウンロードする

アイコン名を入力したテキストボックスの右側のボタンを押し、ファイルをダウンロードします。

 

ダウンロードしたファイルは、下記のようなディレクトリ構造になっているかと思います。

 

ファイル名

|ーconfig.json

|ーweb_link_icons_icons.dart

|ーfonts

|ーWebLinkIcons.ttf

 

Flutterプロジェクトにファイルを組み込む

ダウンロードしたファイルを、Flutterプロジェクトに組み込みます。

① fontsフォルダを作成する

ルートディレクトリ直下に、「fonts」という名前のフォルダを作成します。

 

ルートディレクトリ

|ーandroid

|ーios

|ーlib

|ーfonts ←作成する

|

 

② fontsフォルダに、先ほどダウンロードしたファイルの内容の一部を格納する

↓格納するもの

  • config.json
  • WebLinkIcons.ttf

 

③ web_link_icons_icons.dartを適当なフォルダに格納する

ルートディレクトリ¥lib内の任意のフォルダに、先ほどダウンロードしたweb_link_icons_icons.dartを格納します。

 

④ pubspec.yamlを編集する

pubspec.yamlに、設定を適用するための呪文を記述します。

name: app_name
description: app name

publish_to: 'none'

version: 1.0.0+1

environment:
 ...

dependencies:
 ...

dev_dependencies:
 ...

flutter:
  fonts:
    - family: WebLinkIcons
      fonts:
        - asset: fonts/WebLinkIcons.ttf

  uses-material-design: true

 

 

アプリを再インストールする

ここで一回詰みました。

今回、IconDataはフォントとして読み込んで使用していますが、フォントの設定を適用するためにはリビルドからではなく再インストールから行う必要があるようです。

一旦実機 or エミュレーターからアプリをアンインストールして、再インストールしましょう。

 

 

コーディングして表示する

ここまででプロジェクトへのアイコンの適用は完了したので、表示してみましょう。

ゴールのListTileのソースコードは、下記になります。

import 'package:flutter/material.dart';
import 'package:playport_mockup/fonts/web_link_icons_icons.dart';

import 'ConnectPage.dart';

// ------------------------------------
// Webリンクページ
// ------------------------------------
class WebLinkPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 50.0),
      child: Column(
        children: [
          _message(context, "YouTube", "youtubeのURLを記載", WebLinkIcons.youtube),
          _message(context, "Twitter", "twitterのURLを記載", WebLinkIcons.twitter_bird_1),
          _message(context, "Instagram", "instagramのURLを記載", WebLinkIcons.linkedin_rect),
          _message(context, "Facebook", "FacebookのURLを記載", WebLinkIcons.facebook_rect_1),
        ],
      ),
    );
  }
  
  // 内容を表示
  Widget _message(BuildContext context, String type, String str, IconData icon) {
    return ListTile(
      leading: Icon(icon),
      title: Text(str, style: TextStyle(color: Colors.grey),),
    );

    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Text(
          type,
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        ConstrainedBox(
          constraints: BoxConstraints(
            minWidth: MediaQuery.of(context).size.width,
          ),
          child: Container(
            margin: const EdgeInsets.all(10.0),
            padding: const EdgeInsets.all(10.0),
            decoration: BoxDecoration(
              color: Theme.of(context).cardColor,
              borderRadius: BorderRadius.all(
                Radius.circular(5.0),
              ),
            ),
            child: Text(
              str,
            ),
          ),
        ),
      ],
    );
  }
}

 

 

 

 

 

 

 

コメント

タイトルとURLをコピーしました