Flutter App显示Github Readme文档

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

一、引入markdown插件

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

  1. 在项目的pubspec.yaml文件中添加插件引用:
flutter_markdown: 0.3.5
  1. 获取插件
    在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,
)

五、效果图

app显示readme

六. 项目介绍

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值