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

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

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

f:id:mbaasdevrel:20200305230542p:plain

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

前回は記事の一覧表示を実装しましたので、今回は記事の詳細表示を実装します。

タップした際の処理を作る

前回、記事の一覧表示を実装した時に、onTap を作成してありました。下記コードの タップした際の処理 がそうです。

@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,
    ),
  );
}

この部分を実装していきます。

画面遷移について

Flutterでの画面遷移はNavigatorを使います。Navigatorを使うことで、別な画面に対してデータを受け渡しながら画面遷移ができます。具体的なコードとしては、以下のようになります。

onTap: () {
  Navigator.push(context, new MaterialPageRoute<Null>(
    settings: const RouteSettings(name: "/detail"),
    builder: (BuildContext context) => new MyDetailPage(ncmb: widget.ncmb, object: listItem[index])
  ));
},

MyDetailPageクラスについて

MyDetailPageクラスはMyHomePageクラスとほとんど変わりません。ただし、引数としてNCMBObjectも受け取っています。

class MyDetailPage extends StatefulWidget {
  MyDetailPage({Key key, this.ncmb, this.object}) : super(key: key);
  NCMB ncmb;
  NCMBObject object;
  @override
  _MyDetailPageState createState() => _MyDetailPageState();
}

そして _MyDetailPageState クラスを呼び出しています。

_MyDetailPageStateクラスについて

_MyDetailPageState クラスは画面表示を行うのみです。buildもリスト表示に比べるとずいぶんシンプルになります。

class _MyDetailPageState extends State<MyDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.object.get('title'))),
      body: new Center(
        child: SingleChildScrollView(
          child: Html(
            data: widget.object.get('description')
          )
        )
      )
    );
  }
}

HTML表示について

descriptionで送られてくるHTML文字列は、_MyDetailPageState内でHTML表示にしています。そのため、まずはflutter_htmlを取り込みます。pubspec.yamlに追記します。

dependencies:
  flutter:
    sdk: flutter
  ncmb: ^0.1.1
  flutter_dotenv: ^2.0.1
  html: ^0.14.0+3
  flutter_html: ^0.11.1 # 追記

そして flutter pub get コマンドでライブラリを取り込みます。

HTMLの表示

main.dart にてflutter_htmlをインポートします。

import 'package:flutter_html/flutter_html.dart';

これで詳細画面でのHTML表示が実現できます。

f:id:mbaasdevrel:20200305230519p:plain

まとめ

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

中津川 篤司

中津川 篤司

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