📰
News API, Flutterを使用したニュースアプリ
はじめに
News APIというニュースを取得するAPIがあり、「これをFlutterでアプリにするならどのような構成にするかな」と考えてました。
ただ実際に手を動かしてみたくなったので作ってみました。
成果物
環境
- Flutter: 2.10.3
- auto_route: 3.2.4
- breakpoint: 1.2.0
- dio: 4.0.4
- flutter_inappwebview: 5.3.2
- hooks_riverpod: 1.0.3, flutter_riverpod: 1.0.3
- shared_preferences: 2.0.13
- state_notifier: 0.7.2+1
- freezed: 1.1.1
News APIの種類
News APIは Everything, Top headlinesという2種類のAPIが存在します。
Everything
- キーワードなどを指定してニュースを検索
- languageパラメーターあるが、
ja
はなし- 日本語キーワードを指定すれば、日本語のニュースが取得できる
Top headlines
- カテゴリを指定して、そのヘッドラインを取得
- countryパラメーターで
jp
を指定すると日本のヘッドラインが取得できる
画面構成
全体
- ヘッドライン・検索・設定のメニューから遷移する3画面
- ヘッドライン・検索から遷移するニュース表示の1画面
- ヘッドライン・検索・設定のメニューは下に表示
ヘッドライン
- 各カテゴリごとにヘッドラインのニュースをグリッドで表示
- グリッドのタップで、ニュースを表示
- カテゴリの切り替えはタブ
検索
- キーワード・検索ボタンフォーム
- 検索結果をグリッドで表示
- グリッドのタップで、ニュースを表示
設定
- 言語・テーマの設定
- ニュース自体の言語・国はなし
ニュース表示
- WebView
実装のトピック
全体
- メニューを下に表示するため、BottomNavigationBarを使用
- AutoRouteの
AutoTabsScaffold
を使用することでタブの切り替えや現在位置の管理が便利に
ヘッドライン
- 取得したニュース情報は(状態管理)は、riverpod + state_notifierで管理
- カテゴリごとに同じ内容となるため、riverpodの.familyを使用すると便利に
検索
- 取得したニュース情報は(状態管理)は、riverpod + state_notifierで管理
設定
- 言語・テーマは、riverpod + state_notifierで管理
- 永続化はshared_preferencesを使用
ニュース表示
- ニュース表示は、flutter_inappwebviewで表示
- JavaScriptのalert, confirm, promptも対応できるように、webview_flutterは使用しない
まとめ
News API, Flutterを使用したニュースアプリを作成することができました。
auto_routeやriverpodは、いままでも使用してきましたが、改めて公式ドキュメントを見直す機会になったので良かったです。
Discussion
興味深いアプリありがとうございました。早速試してみましたが、利用可のAPI KEYを入れても、画面にUnauthorizedとだけ表示されてしまいます。思い当たる原因があればご教示ください。よろしくおねがいします。
コメントいただきありがとうございます。
Unauthorized
はNews APIのレスポンスのHTTPステータスコードが401の場合に表示しています。そのため、NEWS API KEYの設定ができていないのかもしれません。
NEWS API KEYについては、
--dart-define
で指定する想定です。READMEにはVSCode向けの設定メモを記載していたのですが、肝心の .vscode/launch.json.sample がGitHubにPushできておらず、すみません。
launch.json.sample をPushしましたが、念の為こちらでも記載します。
.vscode/launch.json を作成(.vscode/launch.json.sampleからコピー)
※VSCodeでFlutterを実行・デバックするときの引数を指定しています
もしAndroid Studioを使用されている場合は、「flutter android studio dart-define」で検索いただくと指定方法がでてくると思います。