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

image

Version

  • Flutter 2.10.1
  • Dart 2.16.1
  • line_icons: ^2.0.1

line_icons

line_iconsicons8という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感をなくしてみましょう。

お知らせ

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More