寻求无需服务器的Flutter评论服务方案及GitHub Issues获取方法

一、正确使用github包获取GitHub Issues #

你之前用pub.dev的github包没成功，大概率是配置或调用方式不对，以下是标准流程：

1. 添加依赖到pubspec.yaml：

dependencies:
  github: ^9.2.0 # 使用最新版本

2. 初始化GitHub客户端：

   • 匿名访问（无服务器场景推荐，但有API速率限制：60次/小时）：

   import 'package:github/github.dart';
   
   final github = GitHub();
   

   • 若需更高速率限制（5000次/小时），可使用个人访问令牌（PAT），但绝对不要把PAT硬编码在Flutter客户端代码中，可引导用户自行在应用内输入或通过安全方式注入：

   final github = GitHub(auth: Authentication.withToken('你的PAT'));
   

3. 获取指定仓库的Issues：

Future<List<Issue>> fetchIssues() async {
  try {
    final repo = RepositorySlug('用户名', '仓库名');
    // 可添加参数筛选状态、标签等，这里获取公开的开放状态Issues
    final issues = await github.issues.listByRepo(repo, state: 'open');
    return issues.toList();
  } catch (e) {
    print('获取Issues失败：$e');
    return [];
  }
}

调用该方法即可拿到对应仓库的Issues列表，后续可将数据渲染为自定义评论UI。

二、集成Utterances评论系统 #

Utterances本身是Web端工具，Flutter中可通过webview_flutter包嵌入WebView加载它：

1. 添加webview_flutter依赖：

dependencies:
  webview_flutter: ^4.4.0 # 使用最新版本

2. 加载Utterances的Web页面：

import 'package:webview_flutter/webview_flutter.dart';

class UtterancesCommentView extends StatefulWidget {
  final String repo; // 格式：用户名/仓库名
  final String issueTerm; // 关联的Issue标识，比如页面路径、标题

  const UtterancesCommentView({super.key, required this.repo, required this.issueTerm});

  @override
  State<UtterancesCommentView> createState() => _UtterancesCommentViewState();
}

class _UtterancesCommentViewState extends State<UtterancesCommentView> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadHtmlString('''
        <html>
          <body>
            <script src="https://utteranc.es/client.js"
                    repo="${widget.repo}"
                    issue-term="${widget.issueTerm}"
                    theme="github-light"
                    crossorigin="anonymous"
                    async>
            </script>
          </body>
        </html>
      ''');
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(controller: controller);
  }
}

使用时传入你的GitHub仓库地址和关联的Issue标识（比如当前页面路由），即可在Flutter中展示Utterances评论区。

三、其他无服务器评论方案 #

1. Giscus #

和Utterances类似，但基于GitHub Discussions，集成方式一致，也是通过WebView加载官方脚本，支持更多自定义配置，适合需要分类讨论的场景。

2. Firebase Firestore + 匿名认证 #

无需自建服务器，借助Firebase的BaaS服务：

• 开启Firebase匿名认证，让用户无需注册即可评论
• 用Firestore存储评论数据，直接在Flutter客户端读写
• 优势是可完全自定义UI，无需依赖WebView；缺点是需要配置Firebase项目（免费额度足够小流量应用）

3. Disqus嵌入 #

通过WebView加载Disqus的嵌入代码，适合已有Disqus账号的场景，但需在Disqus后台配置站点信息，免费版带有广告。

内容的提问来源于stack exchange，提问作者이준우