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

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

Flutterでニュースアプリを作る(記事の一覧表示)

f:id:mbaasdevrel:20200305225432p:plain

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

前回はデータの投入とNCMBの初期化を行いましたので、今回は記事の一覧表示を実装します。

NCMBを子ウィジェットに渡す

NCMB SDKはDartだけで作成しています。Android/iOSネイティブの部分に手を加えずに使える一方、グローバル変数がないので利用に若干手間がかかります。まず MyApp クラスに手を加えます。

home: MyHomePage(title: 'Flutter news Home Page', ncmb: ncmb),

このように引数としてncmbを追加します。次に MyHomePage クラスでも、そのncmbを受け取ります。

class MyHomePage extends StatefulWidget {
  // 引数追加
  MyHomePage({Key key, this.title, this.ncmb}) : super(key: key);
  final String title;
  NCMB ncmb;   // 追加
  // : 省略
}

これで準備完了です。

記事の読み込み処理を追加する

記事の読み込みは _MyHomePageState クラスで行います。initState メソッドにて、記事一覧の読み込み処理を行います。

class _MyHomePageState extends State<MyHomePage> {
  // 追加(記事一覧が入る)
  var listItem = [];
  
  // 追加
  @override
  void initState() {
    super.initState();
    getNews();
  }
  // 省略
}

getNews メソッドは次のようになります。ncmbには widget.ncmb でアクセスできます。そしてデータを取得したら、 setState を使って状態を更新します。

void getNews() async {
  var entry = widget.ncmb.Query('Entry');
  entry.order('createDate');
  var _listItem = await entry.fetchAll();
  setState(() {
    listItem = _listItem;
  });
}

表示画面を作る

表示する画面は次のようなコードです。コード量は長いですが、リスト表示しているだけです。 listItem[index] でNCMBObjectにアクセスできます。以下の例ではタイトルと詳細を利用しています。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text(widget.title),),
    body: ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return Container(
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(color: Colors.black38),
              ),
            ),
            child: ListTile(
              title: Text(listItem[index].get('title')),
              subtitle: Text(stripTags(listItem[index].get('description')), 
                overflow: TextOverflow.ellipsis, maxLines: 2
              ),
              onTap: () {
                // 記事をタップした時の処理
              },
          ));},
      itemCount: listItem.length,
    ),
  );
}

HTMLタグの除去処理について

RSSフィードの記事詳細はHTMLタグを含んでいます(RSSフィードによります)。そこで、HTMLタグを除去して、テキストだけにする処理を追加しています。この処理のために、まずHTMLをパースするhtmlライブラリを追加します。これはpubspec.yamlへの記述が必要です。

dependencies:
  flutter:
    sdk: flutter
  ncmb: ^0.1.1
  flutter_dotenv: ^2.0.1
  html: ^0.14.0+3 # 追加

そして flutter pub get コマンドでライブラリを取り込みます。次にmain.dartにてライブラリを読み込みます。

import 'package:html/parser.dart';

これでHTMLライブラリが使えるようになります。そして _MyHomePageState クラスに stripTags メソッドを追加します。

String stripTags(String htmlString) {
  var document = parse(htmlString);
  return parse(document.body.text).documentElement.text;
}

これでデータの一覧表示ができました。アプリを立ち上げると、mBaaSにあるEntryクラスを読み込み、記事一覧を表示するはずです。

f:id:mbaasdevrel:20200305225410p:plain

まとめ

今回までの処理でmBaaSを使って記事一覧を表示する処理ができあがりました。次回は記事をタップした際に、詳細画面に遷移する処理を作成します。なお、コードはNCMBMania/flutter_news: Flutter SDKを使ったニュースアプリデモです。にて公開しています。実装時の参考にしてください。

中津川 篤司

中津川 篤司

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