Closed KobayashiYoh closed 2 years ago
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に書かれた、ページネーションの実装に近いのでそこまで難しくはないと思います! ただ、変更箇所が多くなるので、参考程度で構いません。
@Yoshida-koshi 修正しました。 FollowsFollowersListPageだけでなく、ページネーション機能のある他のページも修正しました。 92fc25f
数行だけアノテーションコメントを追加しました。 852c5a0
僕はOKなので、2次レビューをお願いしてください。
今回の差分に入ってませんが要注意ですね。 https://github.com/shinonome-inc/mobile_yo/blob/2258ddcc1852af9efdf241cf62d35f01c3a9fdd8/mobile_qiita_app/lib/components/user_component_of_user_list.dart#L38-L55
そんなに長い名前の方がいらっしゃることまで想定できていませんでした。 1行で収まるように修正します。
そんなに長い名前の方がいらっしゃることまで想定できていませんでした。
もしこのように名前の長いアカウントが見つからなければ 一時的に名前のテキストの部分に長いテキストを入れていテストしてみるのはありですね。
そんなに長い名前の方がいらっしゃることまで想定できていませんでした。
もしこのように名前の長いアカウントが見つからなければ 一時的に名前のテキストの部分に長いテキストを入れていテストしてみるのはありですね。
現在、user.nameを'なまええええええええええええええええええええええええ'に変更して色々と試しています。
#32
~~A RenderFlex overflowed by 34 pixels on the right. と Incorrect use of ParentDataWidget.の解決方法について質問があるため、issueを作成しました。
ご回答よろしくお願いします。~~
修正しました。 7f303f6
↓各文字列をはみ出るぐらい長くして試しました。
TextのString dataを'@${user.id}',に戻した際、文字の上下が少し削れてしまっていたため、修正しました。 0a6e178
うまく対処できていると思います。 LGTMです。
概要
お世話になっております。 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
次の実装予定
実装後のUI
https://user-images.githubusercontent.com/82624334/155074302-5cfdfc2d-6828-4a8a-8042-8eec56e0d025.mp4