【Flutter最終課題】FollowsFollowersListPage・ページネーション実装

[KobayashiYoh]

概要

お世話になっております。 FollowsFollowersPageの実装をしました。 レビューよろしくお願いします。

Client IDとClient Secret

Client IDとClient Secretが書かれているファイル（qiita_auth_key.dart）は こちらからダウンロードしてください。 ダウンロードしたファイルはmobile_qiita_app/lib/に格納してください。 よろしくお願いします。

新しく実装した内容

1. FollowsFollowersListPage・ページネーション実装

FollowsFollowersListPageでページネーション実装をしました。 bfe1bb60ec5407b9c83506df8f612c042112c580 該当ファイル : mobile_qiita_app/lib/pages/follows_followers_list_page.dart mobile_qiita_app/lib/services/qiita_client.dart

次の実装予定

• UserPage

実装後のUI

https://user-images.githubusercontent.com/82624334/155074302-5cfdfc2d-6828-4a8a-8042-8eec56e0d025.mp4

[Yoshida-koshi]

lib/follows_followers_list_page.dart

child: FutureBuilder(
          future: _futureUsers,
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            Widget child = Container();

            if (snapshot.hasError || _isNetworkError) {
              _isLoading = false;
              _isNetworkError = true;
              child = ErrorView.networkErrorView(_reload);
            } else if (snapshot.hasData) {
              child = UserList(
                    onTapReload: _reload,
                    users: snapshot.data!,
                    userId: widget.userId,
                    usersType: widget.usersType);
            } else if (snapshot.connectionState == ConnectionState.waiting) {
              child = Center(child: CircularProgressIndicator());
            }

            return Container(
              child: child,
            );
          },
        ),

lib/user_list.dart

import 'package:flutter/material.dart';
import 'package:mobile_qiita_app/components/user_component_of_user_list.dart';
import 'package:mobile_qiita_app/models/user.dart';
import 'package:mobile_qiita_app/services/qiita_client.dart';

// ユーザー一覧を表示
class UserList extends StatefulWidget {
  UserList({
    required this.onTapReload,
    required this.users,
    required this.userId,
    required this.usersType,
    Key? key,
  }) : super(key: key);

  final Future<void> Function() onTapReload;
  final List<User> users;
  final String userId;
  final String usersType;

  @override
  _UserListState createState() => _UserListState();
}

class _UserListState extends State<UserList> {
  bool _isLoading = false;
  int _page = 1;
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
        fetchMore();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return widget.users.length < 20
        ? RefreshIndicator(
            onRefresh: widget.onTapReload,
            child: ListView(
              children: [
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: widget.users.length,
                  controller: _scrollController,
                  itemBuilder: (context, index) {
                    return UserComponentOfUserList(user: widget.users[index]);
                  },
                ),
              ],
            ),
          )
        : RefreshIndicator(
            onRefresh: widget.onTapReload,
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: widget.users.length,
              controller: _scrollController,
              itemBuilder: (context, index) {
                return UserComponentOfUserList(user: widget.users[index]);
              },
            ),
          );
  }
  fetchMore() async {
    if (!_isLoading) {
      _isLoading = true;
      _page++;
      var userList = await QiitaClient.fetchUsers(_page, widget.usersType, widget.userId);
      print(userList);
      setState(() {
        widget.users.addAll(userList);
      });
      _isLoading = false;
    }
  }
}

上記のように変更すると記事を追加する時に、記事を毎回更新することはなくなると思います。 follows_followers_list_page.dartは割と簡潔に書けますが、user_list.dartは少し複雑になります。しかし、元々follows_followers_list_page.dartに書かれた、ページネーションの実装に近いのでそこまで難しくはないと思います！ ただ、変更箇所が多くなるので、参考程度で構いません。

[KobayashiYoh]

@Yoshida-koshi 修正しました。 FollowsFollowersListPageだけでなく、ページネーション機能のある他のページも修正しました。 92fc25f

[KobayashiYoh]

数行だけアノテーションコメントを追加しました。 852c5a0

[Yoshida-koshi]

僕はOKなので、2次レビューをお願いしてください。

[ShuheiYoshidaJP]

今回の差分に入ってませんが要注意ですね。 https://github.com/shinonome-inc/mobile_yo/blob/2258ddcc1852af9efdf241cf62d35f01c3a9fdd8/mobile_qiita_app/lib/components/user_component_of_user_list.dart#L38-L55

エラー文

``` The overflowing RenderFlex has an orientation of Axis.horizontal. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex. Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView. ```

[KobayashiYoh]

そんなに長い名前の方がいらっしゃることまで想定できていませんでした。 1行で収まるように修正します。

[ShuheiYoshidaJP]

そんなに長い名前の方がいらっしゃることまで想定できていませんでした。

もしこのように名前の長いアカウントが見つからなければ 一時的に名前のテキストの部分に長いテキストを入れていテストしてみるのはありですね。

[KobayashiYoh]

そんなに長い名前の方がいらっしゃることまで想定できていませんでした。

もしこのように名前の長いアカウントが見つからなければ 一時的に名前のテキストの部分に長いテキストを入れていテストしてみるのはありですね。

現在、user.nameを'なまええええええええええええええええええええええええ'に変更して色々と試しています。

[KobayashiYoh]

#32 ~~A RenderFlex overflowed by 34 pixels on the right. と Incorrect use of ParentDataWidget.の解決方法について質問があるため、issueを作成しました。 ご回答よろしくお願いします。~~

[KobayashiYoh]

修正しました。 7f303f6
↓各文字列をはみ出るぐらい長くして試しました。

[KobayashiYoh]

TextのString dataを'@${user.id}',に戻した際、文字の上下が少し削れてしまっていたため、修正しました。 0a6e178

[ShuheiYoshidaJP]

うまく対処できていると思います。 LGTMです。