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