【Flutter最終課題】My Page・認証したユーザーの情報表示

KobayashiYoh commented 2 years ago

概要

おはようございます。 My Pageで認証したユーザーの情報を表示する実装をしました。今回、記事の読み込み機能は保留にしています。

Client IDとClient Secretが書かれているdartファイルはこちらからダウンロードしてmobile_qiita_app/lib/に格納してください。

レビューよろしくお願いします。

新しく実装した内容

1. 未ログインの場合はTop Pageへ遷移

未ログインの場合のみMy Pageに表示される「ログインする」ボタンをタップすると、Top Pageへ遷移する実装をしました。該当ファイル : mobile_qiita_app/lib/views/error_views.dart, mobile_qiita_app/lib/pages/my_page.dart, mobile_qiita_app/lib/pages/user_page.dart 参考：https://stackoverflow.com/questions/50417283/flutter-cupertinotabbar-does-not-disappear-when-moving-to-the-next-screen

2. 認証済みユーザーの情報を取得

QiitaClient.fetchUserメソッドを利用することにより、QiitaAPIを利用してユーザーの情報を取得できるようにしました。また、QiitaClient.fetchAccessTokenメソッド内でfetchUserメソッドを呼び出すことにより、認証時にユーザー情報を取得することができます。これは、認証時に認証中のユーザー情報を取得しておくことで、My PageのFutureBuilder の複雑化を防ぐためです。該当ファイル : mobile_qiita_app/lib/models/user.dart, mobile_qiita_app/lib/services/qiita_client.dart 参考：https://qiita.com/api/v2/docs#%E8%AA%8D%E8%A8%BC%E4%B8%AD%E3%81%AE%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC

3. My Pageの実装

ユーザー情報とユーザーの投稿記事を表示しました。該当ファイル : mobile_qiita_app/lib/pages/my_page.dart, mobile_qiita_app/lib/pages/user_page.dart 参考：https://blog.dalt.me/2303

主な変更内容

1. View Formatsクラスの作成

記事一覧を表示するListViewなどは各クラス共通で使用するため、View Formatsクラスのメソッドとして再利用可能にしました。該当ファイル : mobile_qiita_app/lib/widgets/view_formats.dart

2. Widget Formatクラスの作成

記事やタグ、ユーザーなどを表示するUIのフォーマットをWidgetFormatsクラスのメソッドとしてまとめました。該当ファイル : mobile_qiita_app/lib/widgets/widget_formats.dart

次の実装予定

ユーザー一覧実装

実装後のUI

https://user-images.githubusercontent.com/82624334/153785051-dc916b5a-6089-42d0-bdc6-1f04c4cfcacb.mp4

KobayashiYoh commented 2 years ago

~~すみません。間違えてテンプレのままプルリクを作成してしまいました。現在編集中です。~~

プルリクを編集しましたレビューよろしくお願いします。

KobayashiYoh commented 2 years ago

デフォルトのアイコンについて少しだけ修正しました b868cb4

ShuheiYoshidaJP commented 2 years ago

今回のPRは実装箇所が多いので、その分レビューを保留にすべき点も存在すると思われます。例えば

マイページで記事を追加読み込み機能の実装保留など

それをこちらに追記してもらってもよろしいでしょうか。

KobayashiYoh commented 2 years ago

マイページで記事を追加読み込み機能の実装保留など

それをこちらに追記してもらってもよろしいでしょうか。

実装保留について追記しました。

ちなみに、実装&プルリク提出はこの順番通りに進めています。

kota78 commented 2 years ago

一例です。

SizedBox(
                height: 48.0,
                child: TextButton(
                  onPressed: () {
                    Navigator.of(context, rootNavigator: true).pop();
                  },
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.green,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(24.0),
                      ),
                    ),
                  ),
                  child: const Text(
                    'ログインする',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
              ),

kota78 commented 2 years ago

上記のログインボタンについて、 figmaによると高さ50,半径25らしいのですが、48,24にしている理由ってあったりしますか？

KobayashiYoh commented 2 years ago

上記のログインボタンについて、 figmaによると高さ50,半径25らしいのですが、48,24にしている理由ってあったりしますか？

figmaの高さまでは見ていませんでしたが、一応48, 24の理由はあります。こちらのレビュー https://github.com/shinonome-inc/mobile_yo/pull/17#pullrequestreview-857580018 を頂いてからは、余白や幅などのサイズをできるだけ8の倍数になるように設定しています。参考：https://ameblo.jp/ca-1pixel/entry-11837685575.html

また、僕がTextButton ではなく、FlatButtonを使っているのはFlutterのバージョンの問題です。 Flutter1.22より前のバージョンだと、TextButtonの角を丸くすることができなかったはずです。

KobayashiYoh commented 2 years ago

my_page.dartを削除して中身がほぼ同じのuser_page.dartをMyPageとして作り直したいのですが、よろしいでしょうか。 user_page.dartだけでMyPageとUserPageの実装をしたいです。

kota78 commented 2 years ago

なるほど！前にお話しされていましたね。これは指示を仰ぐ形になりますかね？ Buttonについては失礼しました、気がつきませんでした。考えがきけてよかったです。

kota78 commented 2 years ago

my_page.dartを削除して中身がほぼ同じのuser_page.dartをMyPageとして作り直したいのですが、よろしいでしょうか。 user_page.dartだけでMyPageとUserPageの実装をしたいです。

個人的にはとてもいいと思います！

KobayashiYoh commented 2 years ago

dd1f44b my_page.dartを削除してuser_page.dartとして作り直しました。また、フォロー、フォロワーボタンをタップ可能に修正しました（遷移は未実装）。

KobayashiYoh commented 2 years ago

65f77e6 未ログイン時にauthenticatedUserが初期化されず、LateInitializatioinErrorが発生していたので、修正しました。また、削除したmy_page.dartを再び作成しました。

mcz9mm commented 2 years ago

LGTMです👍

KobayashiYoh commented 2 years ago

皆さん、レビューしていただきありがとうございました！

shinonome-inc / qiita_client_yo