Zenn
📰

News API, Flutterを使用したニュースアプリ

2022/04/02に公開
2件
Flutter
tech

はじめに

News APIというニュースを取得するAPIがあり、「これをFlutterでアプリにするならどのような構成にするかな」と考えてました。
ただ実際に手を動かしてみたくなったので作ってみました。

成果物

https://github.com/greendrop/flutter_news_sample

環境

  • 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を指定すると日本のヘッドラインが取得できる

画面構成

全体

  • ヘッドライン・検索・設定のメニューから遷移する３画面
  • ヘッドライン・検索から遷移するニュース表示の1画面
  • ヘッドライン・検索・設定のメニューは下に表示

ヘッドライン

  • 各カテゴリごとにヘッドラインのニュースをグリッドで表示
  • グリッドのタップで、ニュースを表示
  • カテゴリの切り替えはタブ

検索

  • キーワード・検索ボタンフォーム
  • 検索結果をグリッドで表示
  • グリッドのタップで、ニュースを表示

設定

  • 言語・テーマの設定
  • ニュース自体の言語・国はなし

ニュース表示

  • WebView

実装のトピック

全体

ヘッドライン

検索

  • 取得したニュース情報は（状態管理）は、riverpod + state_notifierで管理

設定

  • 言語・テーマは、riverpod + state_notifierで管理
  • 永続化はshared_preferencesを使用

ニュース表示

  • ニュース表示は、flutter_inappwebviewで表示
  • JavaScriptのalert, confirm, promptも対応できるように、webview_flutterは使用しない

まとめ

News API, Flutterを使用したニュースアプリを作成することができました。
auto_routeやriverpodは、いままでも使用してきましたが、改めて公式ドキュメントを見直す機会になったので良かったです。

最後まで読んでいただきありがとうございます。この記事がすこしでもよいと思ったら、Like♥ を押してもらえると励みになります。

Discussion

Dino209Dino209

興味深いアプリありがとうございました。早速試してみましたが、利用可のAPI KEYを入れても、画面にUnauthorizedとだけ表示されてしまいます。思い当たる原因があればご教示ください。よろしくおねがいします。

greendropgreendrop

コメントいただきありがとうございます。
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を実行・デバックするときの引数を指定しています

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Dev",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "args": [
        "--debug",
        "--dart-define=NEWS_API_KEY=ここにNEWS APIのAPI KEYを記載"
      ]
    }
  ]
}

もしAndroid Studioを使用されている場合は、「flutter android studio dart-define」で検索いただくと指定方法がでてくると思います。