【Flutter】マテリアルデザインのアイコンに飽きた方へ

Version

• Flutter 2.10.1
• Dart 2.16.1
• line_icons: ^2.0.1

line_icons

line_iconsは icons8という3万点以上ものおしゃれなアイコンが揃ったアイコン素材サイトの素材Flutterで簡単に使えるように作成されたパッケージです。デザインは全て細い線で表現されておりアプリにシンプルで柔らい印象を与えルことができます。マテリアルにはないアイコンもたくさんありとても便利です。

Before

After

パッケージのインストール

まずはアプリにline_iconsのパッケージをインストールをします。パッケージのインストール先はpubspec.yamlファイルです。 line_iconsのパッケージはこちらになります。

pubspec.yamlファイルのdev_dependenciesに以下のように記述します。

※pubspec.yamlファイルは非常にデリケートなので記述する箇所のindent等には注意が必要です。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
    
  line_icons: ^2.0.1

dev_dependenciesの箇所に上記のように記述したら、画面上のpub getボタン、もしくはターミナルでflutter pub getを入力して実行します。

メッセージやターミナルでエラーが吐かれなければ、アプリにline_iconsのインストールが完了したことになります。

使い方

import 'package:line_icons/line_icons.dart';

まずパッケージをインポートします。

Icon(LineIcons.cog)

コードはマテリアルとほぼ一緒でIcons.となるとこをLineIcons.の形にするだけです。

注意点

line_iconsは、icons8を元に作られているためアイコンの名称がマテリアルとは異なる場合が多々あります。そのためicons8で実際に使いたいアイコンを検索し名称を調べた上で使用することをお勧めします。（ちなみに使い方で使用したcogとはマテリアルでいうsettingsになります）

最後に

line_iconsは落ち着いたデザインで可愛さもあるので女性向けのアプリなんかにも使えそうですね。皆さんもline_iconsを使いFlutter感をなくしてみましょう。