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