本系列同步發表在 個人部落格，歡迎大家關注~

個人頁面 - Star 頁面

在 Day 8 的時候，個人頁面的 Star Tab，我並沒有實作 StarRepoPage。

終於今天要連接 GitHub API，不得不實作它了，直接來看程式碼。

lib/pages/profile/star.dart

class StarRepoPage extends StatefulWidget {
  @override
  _StarRepoPageState createState() => _StarRepoPageState();
}

class _StarRepoPageState extends State<StarRepoPage> {
  Future<List<Repository>> starRepoList;

  @override
  void initState() {
    super.initState();
    starRepoList = fetchStarRepos();
  }

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      child: RefreshIndicator(
        child: FutureBuilder(...),
        onRefresh: () async {
          await Future.delayed(Duration(seconds: 1));
          setState(() {
            starRepoList = fetchStarRepos();
          });
        },
      ),
    );
  }

  Future<List<Repository>> fetchStarRepos() async {
    CurrentUser user = await githubClient.users.getCurrentUser();
    List jsonResult = await githubClient.getJSON(
      "/users/${user.login}/starred",
      params: {"pages": "1"},
    );
    List<Repository> starRepos = jsonResult.map((star) {
      return Repository.fromJSON(star);
    }).toList();
    return starRepos;
  }
}

其實主要架構跟 RepoPage 很像，分成兩大部份:

1. build 函數: 一樣使用 FutureBuilder 來構建載入 star 資料的畫面，其中在 star 列表內也是使用昨天寫的 RepoTile。
2. fetchStarRepos 函數: 稍微複雜些，主要是套件中 listStarredByUser 函數中似乎沒提供 pages 參數，而我的 star 項目多達 300 多個，光是載入這些資料就等個 5~7 秒，所以索性就透過 getJSON 直接調用 GitHub API 了。

個人頁面 - 追隨者、追隨頁面

lib/pages/profile/follow.dart

class FollowerPage extends StatefulWidget {
  @override
  _FollowerPageState createState() => _FollowerPageState();
}

class _FollowerPageState extends State<FollowerPage> {
  Future<List<User>> followerList;

  @override
  void initState() {
    super.initState();
    followerList = fetchFollowers();
  }

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      child: RefreshIndicator(
        child: FutureBuilder(...),
        onRefresh: () async {
          await Future.delayed(Duration(seconds: 1));
          setState(() {
            followerList = fetchFollowers();
          });
        },
      ),
    );
  }

  Future<List<User>> fetchFollowers() async {
    CurrentUser user = await githubClient.users.getCurrentUser();
    return githubClient.users.listUserFollowers(user.login).toList();
  }
}

我想大家猜到了，FollowerPage 和 FollowingPage 其實跟其他的頁面相去不遠，一樣也是用 FutureBuilder 搭配昨天自製的 UserTile。
也同樣有對應的異步任務函數 fetchFollowers 和 fetchFollowing。

這邊比較複雜的只有 fetchFollowing，

  Future<List<User>> fetchFollowing() async {
    CurrentUser user = await githubClient.users.getCurrentUser();
    List jsonResult = await githubClient.getJSON(
      "/users/${user.login}/following",
    );
    List<User> followingUsers = jsonResult.map((user) {
      return User.fromJson(user);
    }).toList();
    return followingUsers;
  }

這邊跟前一節 fetchStarRepos 一樣，套件目前沒有 listUserFollowing 這函數，所以也只能透過 getJSON 直接調用 GitHub API 拉~

--

今日成果