shinonome-inc / qiita_client_yo

【模擬開発案件】Qiitaクライアントアプリ(PlayGroundモバイルコース最終課題)
3 stars 0 forks source link

【Flutter最終課題】TagPage・タグをタップして遷移 / TagDetailListPage・タグに紐づいたデータ表示 #15

Closed KobayashiYoh closed 2 years ago

KobayashiYoh commented 2 years ago

概要

おはようございます。 TagPageでタップしたタグの記事をTagDetailListPageで表示する実装をしました。 レビューよろしくお願いします。

新しく実装した内容

1. TagPageでタグをタップして遷移

TagPageでタグをタップしたらTagDetailListPageへ画面遷移する実装をしました。 e45423ace8505e2f9528cc89ba941ea83db3a2d3 該当ファイル : lib/pages/tag_page.dart

2.タグに関する記事を取得するfetchTagDetailの追加

タグに関連した記事を取得する関数fetchTagDetailをClientクラスに追加しました。 (余談:こういう場合は関数ではなくメソッドと呼ぶべきでしょうか?) 該当ファイル : lib/services/client.dart

3.TagDetailListPageの実装

タグに応じた記事一覧を表示するTagDetailListPageの実装をしました。 e45423ace8505e2f9528cc89ba941ea83db3a2d3 f9a9ffc7f8db48369a4fcf6c6d538ad001b7f8f0 該当ファイル : lib/pages/tag_detail_list_page.dart 参考:lib/pages/feed_page.dart

主な変更内容

1. タブバーをCupertinoTabBarに変更

従来のBottomNavigationBarだと、TagPageからTagDetailListPageへ画面遷移した際に画面下のタブバーの表示が消えてしまいます。 それを防ぐために、タブバーをBottomNavigationBarからCupertinoTabBarへ変更しました。 091465496eea50bd96cff46c0648ff261778b075 該当ファイル : lib/pages/bottom_navigation.dart 参考 : https://github.com/shinonome-inc/onsen-2021-2-sasa-no-yu/blob/mobile/feature/main/mobile/flutter_app/lib/pages/bottom_navigation.dart https://api.flutter.dev/flutter/cupertino/CupertinoTabBar-class.html


今後の実装予定


実装後のUI

https://user-images.githubusercontent.com/82624334/149697859-1a141a12-75ca-4066-b8bb-eacb8c02a7cd.mp4

https://user-images.githubusercontent.com/82624334/149697784-60555b3d-6359-4a49-8a4f-5a0c30ae9488.mp4


ShuheiYoshidaJP commented 2 years ago

 2022-01-17 13 22 15 せっかくフォントを導入しているので フォントをPacificoにしてみるのはどうでしょうか。 それ以外はLGTMです。

KobayashiYoh commented 2 years ago

@ShuheiYoshidaJP レビューしていただきありがとうございます。 フォントをPacificoに変更してみました。 6db21a9 Screenshot_1642394380