Flutterでリストビューにアイコンを追加する方法

2021-03-15

アプリ開発

はじめに

Flutterのチュートリアルを進め、リストビューにアイコンを追加する方法を紹介します。アイコンを追加することで、お気に入りの状態を管理できるようになります。

Flutterのリストにアイコンを追加する方法

Flutterチュートリアルを進めましょう。アプリケーションにリストビューを追加して、そのリストの中にアイコンを追加する方法を見ていきます。公式チュートリアルにない情報を補足しつつ確認しければと思います。

参考： Flutter codelab

プロジェクトの作成

$ flutter create startup_namer
$ cd startup_namer
$ dart migrate --apply-changes

フォルダを作りたい箇所から、コマンドプロンプトなどから上記を実行。

dart migrate

Dart Docs 記載されたコードがNull Safeかどうか等、コー上に問題が無いことを確認しdart migrateを実行することで、不都合のあるような箇所を修正を補助してくれる機能です。

チュートリアルコードの適用

main.dartの更新

このコードに書き換えます。このコードは前回までに実施していた公式チュートリアルのコードと同じものです。

github flutter/codelabs

pubspec.yamlの更新

dependencies:
    ~~~中略~~~
    cupertino_icons: ^1.0.2
    english_words: ^4.0.0-0 // Add this line

flutter pub get

追加したパッケージをプロジェクトに追加します。

実行結果

flutter run

実行結果

リストにお気に入りボタンを追加する

お気に入りの状態を保存できるようにする

class _RandomWordsState extends State<RandomWords> {
    final _suggestions = <WordPair>[];
+   final _saved = <WordPair>{}; //この行を追加する

alreadySavedチェックを追加して、単語がお気に入りにまだ追加されていないことを確認するための変数を用意。

Widget _buildRow(WordPair pair) {
+  final alreadySaved = _saved.contains(pair);  // NEW
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
+      trailing: Icon(
+        alreadySaved ? Icons.favorite : Icons.favorite_border,
+        color: alreadySaved ? Colors.red : null,
+      ),
  );
}

お気に入りの状態を保存できるようにする

ちなみにアイコンの部分はこのように図形がいくつか用意されているためIconsの要素を確認することで色々変更できます。一昔前のTwitterのように、お気に入りボタンは★にしたいということであればこのように書けます。

      trailing: Icon(
        alreadySaved ? Icons.star : Icons.star_border,
        color: alreadySaved ? Colors.red : null,
      ),

操作方法

VSCodeで開発をしていれば、Icons. の後ろにカーソルを持っていき、Ctrl+Spaceを2回押すことで、アイコンがどのような形であるかを確認できます。

予測変換

もし出ない場合は、この記事のPluginを導入することで見れるようになるはずです。 Flutter2をはじめるまでの方法

リストを押したときの処理を書く

onTap関数を追加することで、Wigetにクリック処理を追加できる。 setState()は、Widgetを再構成して変更を反映させる事ができる関数。

    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: Icon(
        alreadySaved ? Icons.star : Icons.star_border,
        color: alreadySaved ? Colors.red : null,
      ),
+      onTap: () {
+        setState(() {
+          if (alreadySaved) {
+            _saved.remove(pair);
+          } else {
+            _saved.add(pair);
+          }
+        });
+      },
    );
  }