Flutterでお気に入り追加機能と一覧画面を追加してみる

前回作成しました文字列が並んでいるスクロールリストにお気に入り機能追加してみます。

Flutterで無限スクロールリストを作成する方法

また、お気に入りに追加されたワードは新規に作成するお気に入り一覧画面に表示されるようにします。

サンプルアプリを作ってみる

今回のアプリは前回作成した無限スクロールリストアプリに追加する形で進めます。

アプリの概要

冒頭で述べた通り、無限スクロールリストの文字列にお気に入り機能を追加し、追加された文字列はお気に入り一覧画面に表示されるようにします。

次のステップで実装を進めます。

  • お気に入り文字列を保存する機能を追加
  • 保存状態を表すアイコンを一覧に追加
  • お気に入り一覧画面を追加

実装

お気に入り文字列を保存する機能を追加

はじめに_RandomWordsStateクラスにお気に入りに追加した文字列を保存する_saved変数を用意します。


class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _saved = Set<WordPair>();    // 追加
  final _biggerFont = TextStyle(fontSize: 18.0);
  ・・・
}

_saved変数はSetクラスを利用しています。

SetクラスはList(配列)とほぼ同等の機能を持ちますが、重複した値を許可しないという点だけが異なります。

Set class – dart:core library – Dart API

_buildRowメソッドにお気に入りに追加されてるかどうかを判定するalreadySaved変数を追加します。


Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);  // 追加
  ...
}

contains_saved変数に該当の文字列の有無によって、alreadySavedにbool型(trueかfalse)が代入されます。

contains method – String class – dart:core library – Dart API

保存状態を表すアイコンを一覧に追加

お気に入り追加状態を示すアイコンを追加します。


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

ここまでできたら下のキャプチャのようにハートアイコンが表示されます。(タップしても何も変化しません)

次にハートアイコンをタップしたらその文字列を_saved変数に追加、もしくは削除するようにします。


Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return ListTile(
    title: Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: Icon(
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
    // ここから追加
    onTap: () {
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else {
          _saved.add(pair);
        }
      });
    },
    // ここまで追加
  );
}

これでタップしたらハートアイコンが切り替わるようになりました。

お気に入り一覧画面を追加

最後にお気に入りに追加した文字列を一覧表示する画面を追加します。

画面遷移の基本についてはこちらの記事に詳しく記載していますので、初めての方は参考にしてみてください。

Flutterで画面遷移する方法

今回はAppBarにお気に入り一覧画面へ遷移するアイコンボタンを追加します。


appBar: AppBar(
  title: Text('Infinite Scroll ListView'),
  // ここから追加
  actions: [
    IconButton(
      icon: Icon(Icons.list),
      onPressed: _pushSaved,
    )
  ],
  // ここまで追加
),

_RandomWordsStateクラスに_pushSave()メソッドを追加します。


void _pushSaved() {}

この状態でリロードするとAppBarの右端にアイコンが追加されます。

最後に_pushSavedメソッドの中身を書いていきます。


void _pushSaved() {
  Navigator.of(context).push(
    MaterialPageRoute<void>(
      builder: (BuildContext context) {
        final tiles = _saved.map(
          (WordPair pair) {
            return ListTile(
              title: Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );

        final divided = ListTile.divideTiles(
          context: context,
          tiles: tiles,
        ).toList();

        return Scaffold(
          appBar: AppBar(
            title: Text('Saved Suggestions'),
          ),
          body: ListView(
            children: divided,
          ),
        );
      },
    ),
  );
}

中身を詳しく見ていきましょう。

はじめにMaterialPageRouteとそのbuilderを追加します。

builder内ではまずお気に入りに追加した文字列を保存している_saved変数を展開し、ListTileを生成します。

そのListTileのdivideTiles()メソッドを呼び出し、各ListTile間に水平線を追加します。

divide変数は、toList()メソッドによって変換された整形されたリストが代入されます。

最後にSavedSuggestions という名前の新しいAppBarを含むScaffoldを返します。

bodyには整形したリストを持つListViewウィジェットが表示されます。

実行

完成したアプリを実行してみます。

ABOUTこの記事をかいた人

Yusuke Ito

■バックエンド開発(TypeScript、PHP etc)をメインに活動し、2020年からFlutterによるアプリ開発案件に参画し、多様なニーズに応えれるエンジニアを目指す。 ■エンジニア目線でより良い提案、目的に合わせた仕様の提案が得意です。 ■Flutterに関する技術、個人アプリの開発、キャリア、書評をメインに発信しています。 ■筋トレ、ゴルフ、読書が趣味