在FlutterGithub客户端中显示github中的Readme.md内容,步骤如下:
一、引入markdown插件
插件地址:https://github.com/flutter/flutter_markdown,查看插件最新版本
- 在项目的pubspec.yaml文件中添加插件引用:
flutter_markdown: 0.3.5
- 获取插件
在Terminal中执行命令:flutter packages get
二、获取readme
接口地址:https://api.github.com/repos/$repoOwner/$repoName/readme
//获取Readme.md内容 【用户名,仓库名】
static getReadme(String repoOwner, String repoName) {
return "https://api.github.com/repos/$repoOwner/$repoName/readme";
}
返回值:
{
"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’换行符再进行解码操作。
//Base64解密
String decodeBase64(String data) {
return utf8.decode(base64Decode(data));
}
//先过滤所有的"\n",然后再用base64解码,得到Readme原始内容
String readmeRaw = decodeBase64(_readmeData.content.replaceAll("\n", ''));
四、使用markdown格式显示readme
import 'package:flutter_markdown/flutter_markdown.dart';
MarkdownBody(
data: readmeRaw,
)
五、效果图
六. 项目介绍
项目地址:用flutter实现的一款界面精美的Github App
介绍:用Flutter实现的一款界面精美、功能较全、体验良好的Github客户端。支持多语言、换肤等功能。代码简单易懂且有充分的注释,很适用于学习Flutter。