Flutter编程语言颜色插件program_language_colors的使用

Flutter编程语言颜色插件program_language_colors的使用

program_language_colors package

program_language_colors 是一个用于根据编程语言获取颜色的包，灵感来源于 GitHub。

Getting started

Depend on it

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  program_language_colors: ^1.0.0

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

Static Properties Color

program_language_colors 提供了静态属性来获取不同编程语言的颜色。例如：

ProgramLanguageColors.Dart
ProgramLanguageColors.HTML
ProgramLanguageColors.CSS
ProgramLanguageColors.CSharp
ProgramLanguageColors.Javascript

Static Function

可以通过名称动态获取编程语言的颜色：

String test = 'HTML';
ProgramLanguageColors.fromName(test);

Example

以下是完整的示例代码，展示如何使用 program_language_colors 插件为不同的编程语言生成颜色卡片。

示例代码

import 'package:flutter/material.dart';
import 'package:program_language_colors/program_language_colors.dart'; // 引入包

void main() {
  runApp(const MyApp()); // 运行应用
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp( // 创建MaterialApp
      title: 'Example', // 设置标题
      theme: ThemeData(), // 主题设置
      home: const HomePage(), // 设置主页
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义编程语言列表
    final languages = ["Dart", "Html", "CSS", "Csharp", "Javascript"];

    return Scaffold( // 创建Scaffold
      appBar: AppBar( // 添加AppBar
        title: const Text('PLC - Example'), // 设置标题
      ),
      body: ListView( // 使用ListView展示内容
        children: languages.map((e) => // 遍历编程语言列表
          Card( // 创建Card
            elevation: 0, // 设置阴影为0
            child: ListTile( // 添加ListTile
              title: Text(e), // 设置文本为编程语言名称
              leading: Container( // 添加颜色块作为前导图标
                width: 100, // 设置宽度
                color: ProgramLanguageColors.fromName(e), // 动态获取颜色
              ),
            ),
          ),
        ).toList(), // 转换为列表
      ),
    );
  }
}