Flutter GitHub Issues管理插件github_issues的使用

Flutter GitHub Issues管理插件github_issues的使用

简介

github_issues 是一个用于管理 GitHub Issues 的 Flutter 插件。它允许开发者通过应用收集用户反馈，并将其直接提交到 GitHub 仓库中。该插件支持两种认证方式，并且提供了本地化的支持。

Screenshots

特性

  • 可以创建带有标题、评论和标签的 GitHub Issues。
  • 提供了简单的国际化支持（通过 GithubIssuesLocalizations）。
  • 支持两种认证方式：
    1. 使用个人访问令牌（Personal Access Token）。
    2. 使用 GitHub 应用程序（GitHub App）进行认证。

开始使用

第一步：创建一个存储用户反馈的仓库

  • 创建一个新的 GitHub 仓库，或者使用现有的仓库来存储用户反馈。

第二步：获取认证令牌

为了访问和操作 Issues，你需要一个具有读写权限的令牌。以下是两种获取令牌的方法：

方法 1：生成个人访问令牌（Personal Access Token）

  1. 登录你的 GitHub 账户。
  2. 访问 GitHub Personal Access Token 页面。
  3. 创建一个新的令牌，确保勾选 repo 权限（可以读取和写入 Issues）。

方法 2：创建 GitHub 应用程序

  1. 注册一个新的 GitHub 应用程序（GitHub App 注册页面）。
  2. 安装该应用程序到目标仓库。
  3. 为应用程序生成一个私钥（GitHub App 私钥生成页面）。

使用示例

基本使用

以下是一个基本的使用示例，展示如何通过弹窗让用户输入反馈并提交到 GitHub：

showDialog(
  context: context,
  builder: (context) {
    return GithubIssueDialog(
      github: Github(Authentication.token('PERSONAL_ACCESS_TOKEN')), // 替换为你的个人访问令牌
      owner: 'OWNER', // 仓库所有者
      repo: 'REPO',   // 仓库名称
      initialValue: const IssueRequest(title: "Hello World!"), // 默认值
    );
  },
);

自定义本地化

如果你希望修改弹窗的标题或提示信息，可以通过自定义本地化类实现：

class CustomLocalization extends GithubIssuesLocalizationsEn {
  [@override](/user/override)
  String get dialogTitle => '感谢您的反馈！'; // 修改弹窗标题
}

showDialog(
  context: context,
  builder: (context) {
    return GithubIssueDialog(
      github: Github(Authentication.token('PERSONAL_ACCESS_TOKEN')),
      owner: 'OWNER',
      repo: 'REPO',
      localizations: CustomLocalization(), // 使用自定义本地化
    );
  },
);

隐藏标题输入框

如果你想只允许用户输入评论，而隐藏标题字段，可以设置 showTitle 属性为 false：

showDialog(
  context: context,
  builder: (context) {
    return GithubIssueDialog(
      github: Github(Authentication.token('PERSONAL_ACCESS_TOKEN')),
      owner: 'OWNER',
      repo: 'REPO',
      showTitle: false, // 隐藏标题输入框
      labels: null,     // 不显示标签
      initialValue: const IssueRequest(title: "Hidden Title"), // 必须提供一个默认标题
    );
  },
);

自定义标签

你也可以在弹窗中添加自定义标签：

showDialog(
  context: context,
  builder: (context) {
    return GithubIssueDialog(
      github: Github(Authentication.token('PERSONAL_ACCESS_TOKEN')),
      owner: 'OWNER',
      repo: 'REPO',
      labels: [
        Label.custom(
          name: 'bug', // 标签名称
          color: colorToRadixString(Colors.red.shade600), // 标签颜色
        ),
        Label.custom(
          name: 'documentation', // 标签名称
          color: colorToRadixString(Colors.blue.shade600), // 标签颜色
        ),
      ],
    );
  },
);

// 辅助方法：将颜色转换为十六进制字符串
String colorToRadixString(Color color) {
  return color.value.toRadixString(16); // 将颜色转换为十六进制表示
}

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 中集成 github_issues 插件：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:github_issues/github_issues.dart';

const kOwner = 'abichinger'; // 仓库所有者
const kRepo = 'github-issues-test'; // 仓库名称

late Github github;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final token = await personalToken; // 获取个人访问令牌
  github = Github(Authentication.token(token)); // 初始化 GitHub 实例

  runApp(const GithubIssuesExampleApp());
}

Future<String> get personalToken {
  return rootBundle.loadString('assets/token.txt'); // 从 assets 文件中加载令牌
}

class GithubIssuesExampleApp extends StatelessWidget {
  const GithubIssuesExampleApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.light,
      theme: ThemeData(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: const GithubIssuesExample(),
    );
  }
}

class GithubIssuesExample extends StatelessWidget {
  const GithubIssuesExample({super.key});

  String colorToRadixString(Color color) {
    return color.value.toRadixString(16); // 将颜色转换为十六进制字符串
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Github Issues - Example'),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return GithubIssueDialog(
                      github: github,
                      owner: kOwner,
                      repo: kRepo,
                      initialValue: const IssueRequest(title: "Hello World!"),
                    );
                  },
                );
              },
              child: const Text('Give Feedback!'), // 给出反馈
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return GithubIssueDialog(
                      github: github,
                      owner: kOwner,
                      repo: kRepo,
                      initialValue: const IssueRequest(title: "Hello World!"),
                      labels: null, // 隐藏标签
                    );
                  },
                );
              },
              child: const Text('Feedback (labels hidden)'), // 隐藏标签
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return GithubIssueDialog(
                      github: github,
                      owner: kOwner,
                      repo: kRepo,
                      showTitle: false, // 隐藏标题输入框
                      labels: null,
                      initialValue: const IssueRequest(title: "Hidden Title"), // 必须提供一个默认标题
                    );
                  },
                );
              },
              child: const Text('Feedback (Only comment)'), // 只输入评论
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return GithubIssueDialog(
                      github: github,
                      owner: kOwner,
                      repo: kRepo,
                      localizations: CustomLocalization(), // 自定义本地化
                    );
                  },
                );
              },
              child: const Text('Feedback (Custom localization)'), // 自定义本地化
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return GithubIssueDialog(
                      github: github,
                      owner: kOwner,
                      repo: kRepo,
                      labels: [
                        Label.custom(
                          name: 'bug',
                          color: colorToRadixString(Colors.red.shade600), // 自定义标签颜色
                        ),
                        Label.custom(
                          name: 'documentation',
                          color: colorToRadixString(Colors.blue.shade600), // 自定义标签颜色
                        ),
                      ],
                    );
                  },
                );
              },
              child: const Text('Feedback (hardcoded labels)'), // 固定标签
            ),
          ],
        ),
      ),
    );
  }
}

class CustomLocalization extends GithubIssuesLocalizationsEn {
  [@override](/user/override)
  String get dialogTitle => '感谢您的反馈！'; // 修改弹窗标题
}

更多关于Flutter GitHub Issues管理插件github_issues的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter GitHub Issues管理插件github_issues的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


github_issues 是一个用于在 Flutter 应用中管理 GitHub Issues 的插件。它允许你与 GitHub API 进行交互，获取、创建、更新和关闭 Issues。以下是如何使用 github_issues 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 github_issues 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  github_issues: ^0.0.1  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 github_issues 插件：

import 'package:github_issues/github_issues.dart';

3. 初始化 GitHub Issues 客户端

你需要使用你的 GitHub 个人访问令牌（Personal Access Token）来初始化 GitHubIssues 客户端。你可以在 GitHub 的开发者设置中生成一个访问令牌。

final githubIssues = GitHubIssues(
  token: 'your_github_personal_access_token',
);

4. 获取 Issues

你可以使用 getIssues 方法来获取指定仓库的 Issues：

final issues = await githubIssues.getIssues(
  owner: 'flutter',
  repo: 'flutter',
  state: 'open',  // 可以是 'open', 'closed', 或 'all'
);

for (var issue in issues) {
  print('Issue #${issue.number}: ${issue.title}');
}

5. 创建 Issue

你可以使用 createIssue 方法来创建一个新的 Issue：

final newIssue = await githubIssues.createIssue(
  owner: 'flutter',
  repo: 'flutter',
  title: 'New Issue Title',
  body: 'This is the body of the new issue.',
  labels: ['bug', 'enhancement'],
);

print('Created Issue #${newIssue.number}');

6. 更新 Issue

你可以使用 updateIssue 方法来更新一个现有的 Issue：

final updatedIssue = await githubIssues.updateIssue(
  owner: 'flutter',
  repo: 'flutter',
  issueNumber: 123,  // 要更新的 Issue 编号
  title: 'Updated Issue Title',
  body: 'This is the updated body of the issue.',
  state: 'closed',  // 可以是 'open' 或 'closed'
);

print('Updated Issue #${updatedIssue.number}');

7. 关闭 Issue

你可以使用 closeIssue 方法来关闭一个 Issue：

final closedIssue = await githubIssues.closeIssue(
  owner: 'flutter',
  repo: 'flutter',
  issueNumber: 123,  // 要关闭的 Issue 编号
);

print('Closed Issue #${closedIssue.number}');

8. 处理错误

在使用 github_issues 插件时，可能会遇到各种错误（如网络错误、认证错误等）。你可以使用 try-catch 块来捕获并处理这些错误：

try {
  final issues = await githubIssues.getIssues(
    owner: 'flutter',
    repo: 'flutter',
    state: 'open',
  );
} catch (e) {
  print('Error: $e');
}
回到顶部