Flutter App显示Github Readme文档


在FlutterGithub客户端中显示github中的Readme.md内容，步骤如下：

一、引入markdown插件

插件地址：https://github.com/flutter/flutter_markdown，查看插件最新版本

  1. 在项目的pubspec.yaml文件中添加插件引用：
1
flutter_markdown: 0.3.5
  1. 获取插件
    在Terminal中执行命令：flutter packages get

二、获取readme

接口地址：https://api.github.com/repos/$repoOwner/$repoName/readme

1
2
3
4
//获取Readme.md内容 【用户名，仓库名】
static getReadme(String repoOwner, String repoName) {
  return "https://api.github.com/repos/$repoOwner/$repoName/readme";
}

返回值：

1
2
3
4
5
6
7
8
9
{
    "name": "README.md",
    "sha": "c9d37206693b24a6389e5b525378dbfb87beba0e",
    "size": 255,
    "type": "file",
    "content": "IyBGbHV0dGVyR2l0aHViCueUqGZsdXR0ZXLmhaLmhaLlrozmiJDkuIDkuKpn\naXRodWLlrqLmiLfnq6/vvIzku4XnlKjkuo7lrabkuaBmbHV0dGVy77yM5Yqf\n6IO96YCQ5q2l5re75Yqg5a6M5ZaE44CCCiMj6L+H56iL5LiACjEu5a6M5oiQ\n55m75b2V6aG16Z2i5ZKM5Yqf6IO9CjIu5a6M5oiQ5oiR55qE6aG555uu5YiX\n6KGoCiMj6L+H56iL5LqMCjEu5a6M5oiQdHJlbmTmjpLooYzmppwKIyPov4fn\nqIvkuIkKMS7lrozmiJDpobnnm67or6bmg4XpobUK\n",
    "encoding": "base64",
    ...........
}

三、获取readme原始内容

可以看到，从接口得到的readme内容content是Base64编码过的，所以要进行解码。
注意点：直接进行Base64解码会报错，要去掉content中的’\n’换行符再进行解码操作。

1
2
3
4
5
6
//Base64解密
String decodeBase64(String data) {
  return utf8.decode(base64Decode(data));
}
//先过滤所有的"\n"，然后再用base64解码，得到Readme原始内容
String readmeRaw = decodeBase64(_readmeData.content.replaceAll("\n", ''));

四、使用markdown格式显示readme

1
2
3
4
import 'package:flutter_markdown/flutter_markdown.dart';
MarkdownBody(
  data: readmeRaw,
)

五、效果图

app显示readme

六. 项目介绍

项目地址：用flutter实现的一款界面精美的Github App
介绍：用Flutter实现的一款界面精美、功能较全、体验良好的Github客户端。支持多语言、换肤等功能。代码简单易懂且有充分的注释，很适用于学习Flutter。