FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Flutterでニュースアプリを作る(お気に入り表示処理)

f:id:mbaasdevrel:20200307221315p:plain

Flutter SDKが徐々にできあがってきましたので、これを使ってデモアプリを作ってみたいと思います。作るのはRSSフィードを表示して、それをお気に入り登録できるアプリです。データストアから一覧を表示して、詳細画面へ遷移するという流れは様々なアプリで応用できるでしょう。

前回は匿名認証とお気に入り登録処理を作りましたので、今回はお気に入り表示機能を実装します。

セグメントコントロールを追加する

記事の一覧表示とお気に入り表示とを切り替えるため、セグメントコントロールを追加します。

var _selectedIndexValue = 0; // セグメントコントロールの選択状態の管理用

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text(widget.title)),
    // カラムを追加
    body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        //セグメントコントロールを追加
        CupertinoSegmentedControl(
          children: {
            0: Text("All entries"),
            1: Text("Favorited"),
          },
          groupValue: _selectedIndexValue,
          onValueChanged: (value) async {
            await changeList(value);
          },
        ),
        new Expanded(
          child: ListView.builder(
            // ここから下は今までのものと同じ
          )
        )
      ]
    )
  )
}

f:id:mbaasdevrel:20200307221315p:plain

このセグメントコントロールで、記事の一覧表示とお気に入り表示を切り替えます。その処理は上記のコード中にあるchangeListになります。

リストの切り替え

リストの切り替え処理(changeList)は下記のようになります。getNewsは元々のもの、追加でgetFavoritesを用意します。

Future<void> changeList(value) async {
  if (value == 0) {
    await getNews();
  } else {
    await getFavorites();
  }
  setState(() => _selectedIndexValue = value);
}

お気に入り取得処理について

お気に入り取得処理のgetFavoritesは次のようになります。includeを使って記事データも含めて取得します。そして、Favoriteクラスから記事データだけを取得して、一覧に渡します。

void getFavorites() async {
  await login();
  var favorite = widget.ncmb.Query('Favorite');
  favorite
    ..include('entry')
    ..order('createDate');
  var favorites = await favorite.fetchAll();
  var ary = favorites.map((f) => f.get('entry')).toList();
  setState(() {
    listItem = ary;
  });
}

これで記事一覧と、お気に入り一覧が切り替えられるようになります。

f:id:mbaasdevrel:20200307221348p:plain

まとめ

今回までの処理で記事一覧の表示と詳細表示、そしてお気に入り登録までの一連の処理ができあがりました。このようなアプリは応用が効くと思います。皆さんのFlutterアプリ開発で活かしてください。なお、コードはNCMBMania/flutter_news: Flutter SDKを使ったニュースアプリデモです。にて公開しています。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。