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

首頁 - GitHub Trending

在首頁的部份除了 Day 14 看到的 Hacker News 之外，還有一個部份是要顯示 GitHub Trending (Project)。

我這邊延續 Day 14 的作法，新建 fetchGHTrends 方法以及修改 buildGHTrends 方法。

Future fetchGHTrends() async {
  List<Project> ghTrends = await githubTrendingClient.listProjects();
  if (this.mounted) {
    setState(() {
      _ghTrends = ghTrends;
    });
  }
}

fetchGHTrends 中直接搭配前三天開發的 githubTrendingClient 作使用囉~

buildGHTrends(BuildContext context) {
  if (_ghTrends == null) {
    return [
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(child: CircularProgressIndicator()),
      )
    ];
  } else {
    return ListTile.divideTiles(
            context: context,
            tiles: _ghTrends.sublist(0, 4).map((project) {
              return ListTile(
                title: Text("${project.fullName}"),
                subtitle: Row(
                  children: <Widget>[
                    Text("${project.language}"),
                    SizedBox(width: 16.0),
                    Text("★ ${project.stars}"),
                  ],
                ),
                onTap: () {},
              );
            }).toList())
        .toList();
  }
}

GitHub 語言標籤

今天結束前的最後一節想做些小優化，想閉大家都知道 GitHub 上每個程式語言都有自己的色碼。
而在這個專案內大量的用到它，考慮到程式複用性和維護性，所以將 GitHub 語言標籤獨立出來變成一個 Widget。

lib/components/github_language_label.dart

import "package:flutter/material.dart";
import 'package:gitme_reborn/utils.dart';

class GithubLanguageLabel extends StatefulWidget {
  const GithubLanguageLabel({
    Key key,
    this.language,
    this.languageHexColor,
  }) : super(key: key);

  final String language;
  final String languageHexColor;

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

class _GithubLanguageLabelState extends State<GithubLanguageLabel> {
  String _labelHexCode;

  @override
  void initState() {
    super.initState();
    searchLanguageColorHexCode(widget.language).then((labelHexCode) {
      setState(() {
        _labelHexCode = labelHexCode;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    Color labelColor;

    if (widget.languageHexColor != null) {
      labelColor = hexToColor(widget.languageHexColor);
    } else if (widget.language != null) {
      labelColor = _labelHexCode != null ? hexToColor(_labelHexCode) : Colors.black;
    }

    if (widget.language != null) {
      return Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            "● ",
            style: TextStyle(color: labelColor, fontSize: 24.0),
          ),
          Text(widget.language),
        ],
      );
    } else {
      return SizedBox();
    }
  }
}

• 將之前有寫到 GitHub 語言標籤的重複部份，獨立出來，寫在 build 裡。
• 將 github-colors 這個專案的 colors.json 加入到 assets 中。
• 撰寫 searchLanguageColorHexCode 來協助找出對應程式語言的色碼(Hex Code)。

  Future<String> searchLanguageColorHexCode(String language) async {
    String githubColors =
        await rootBundle.loadString("assets/data/github-colors.json");
    var githubColorsMap = jsonDecode(githubColors);
    if (language != null) {
      return githubColorsMap[language]["color"];
    } else {
      return null;
    }
  }
  

• 最後將 GithubLanguageLabel 應用在頁面(主頁面、倉庫頁面、搜尋頁面、趨勢頁面...)

--

今日成果