Flutter GitHub颜色获取插件github_colour的使用

Flutter GitHub颜色获取插件github_colour的使用

Apply GitHub’s languages colours into Flutter’s Color object.

从ozh的github-colors仓库接收最新的colors.json文件，并将其转换为Flutter的Color对象。

它还提供了web demo作为演示。

使用方法

你可以在调用runApp(Widget)之前初始化GitHubColour（如果希望从离线数据获取数据，则需要在调用WidgetsFlutterBinding.ensureInitialized()之后执行）：

// 启用离线备份
void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await GitHubColour.initialize();
    runApp(const YourApp());
}

// 禁用离线备份
void main() async {
    await GitHubColour.initialize(offlineLastResort: false);
    runApp(const YourApp());
}

然后在Widget内部使用getExistedInstance()来获取实例：

class YourAppWidget extends StatelessWidget {
    [@override](/user/override)
    Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
            backgroundColor: GitHubColour.getExistedInstance()["Go"] // 使用Go语言的颜色
        )
    );
}

缓存机制（连接失败时）

该插件支持缓存系统，作为请求失败时的备用方案。它使用LZMA压缩数据并存储在临时目录下（对于VM）或基于IndexedDB（sembast_web），版本3.1.0及以下使用shared_preferences。

如果没有可用的缓存，在执行GitHubColour.initialize()时，它将使用本地的colors.json作为最后的手段。然而，由于该包不会同步color.json的最新提交（为了确保下载速度最快），因此不会实时更新。

对于美式英语开发者的提示

它提供了一个别名类GitHubColor，供习惯使用“color”的开发者使用。

截图

示例代码

以下是完整的示例代码，展示如何使用github_colour插件：

import 'package:flutter/material.dart';
import 'package:github_colour/github_colour.dart';

void main() async {
  // 必须调用以启用离线JSON数据作为后备
  WidgetsFlutterBinding.ensureInitialized();
  // 构造一个实例以便将来使用
  await GitHubColour.initialize();

  // 如果禁用离线后备，可以注释掉此行
  /*
    await GitHubColour.initialize(offlineLastResort: false);
   */

  runApp(const App());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
      title: 'GitHub Language colour',
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
      home: const GitHubColourDemo());
}

class GitHubColourDemo extends StatefulWidget {
  const GitHubColourDemo({super.key});

  [@override](/user/override)
  State<GitHubColourDemo> createState() => _GitHubColourDemoState();
}

class _GitHubColourDemoState extends State<GitHubColourDemo> {
  late TextEditingController _ctrl;
  late String _lang;

  [@override](/user/override)
  void initState() {
    super.initState();
    _ctrl = TextEditingController(text: "Dart"); // 默认语言为Dart
    _lang = _ctrl.text;
  }

  void _changeColour() {
    setState(() {
      _lang = _ctrl.text; // 更新语言
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
          // 根据输入的语言更改应用栏背景色
          backgroundColor: GitHubColour.getExistedInstance()[_lang],
          title: const Text("GitHub colour")),
      body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
            Container(
                margin: const EdgeInsets.all(12),
                constraints: const BoxConstraints(maxWidth: 350),
                child: TextField(
                    // 输入语言名称
                    textInputAction: TextInputAction.go,
                    onSubmitted: (_) {
                      _changeColour();
                    },
                    controller: _ctrl,
                    decoration: const InputDecoration(
                        labelText: "Enter language name here:"),
                    autocorrect: false)),
            const Divider(height: 8, indent: 1.5, thickness: 0.25),
            SizedBox(
                // 提交按钮
                width: 80,
                height: 35,
                child: ElevatedButton(
                    onPressed: _changeColour, child: const Text("Apply")))
          ])));
}