Flutter命令行工具插件umbra_cli的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Umbra CLI

Pub umbra_cli coverage style: very_good_analysis License: MIT Powered by Mason

Umbra CLI 允许 Flutter 开发者创建自己的着色器并将它们编译为强类型的 Dart 文件。

快速开始 #

# 🎯 从 https://pub.dev 激活
dart pub global activate umbra_cli

🚀 安装 umbra 依赖项


umbra install-deps


🕶️ 创建你的第一个着色器


umbra create hello_world


📦 将你的第一个着色器编译为 Dart 文件


umbra generate shaders/hello_world.glsl --output lib/shaders/

有关 CLI 命令的更多信息，请参阅 CLI 文档。

有关着色器的文档可以在 着色器规范 文档中找到。

```

example/README.md

用法 #

自定义着色文件 example.glsl（使用 umbra create example 创建） 并生成你需要的目标：

# 自定义着色文件并生成 Dart 着色器目标
umbra generate example.glsl --target=dart-shader

有关 CLI 命令的更多信息，请参阅 CLI 文档。

有关着色器的文档可以在 着色器规范 文档中找到。

```

示例 DEMO

假设我们已经完成了上述步骤，并且安装了 umbra_cli 工具。

  1. 激活 umbra_cli：

    # 在命令行中运行以下命令来激活 umbra_cli
dart pub global activate umbra_cli

  2. 安装依赖：

    # 运行以下命令来安装 umbra 的依赖项
umbra install-deps

  3. 创建一个新的着色器文件：

    # 使用 umbra 创建一个名为 "hello_world" 的新着色器
umbra create hello_world

    这将在项目目录中创建一个 hello_world.glsl 文件。

  4. 编译着色器文件：

    # 编译刚刚创建的着色器文件到 Dart 文件
umbra generate shaders/hello_world.glsl --output lib/shaders/

    这将把 hello_world.glsl 编译为一个 Dart 文件，并将其输出到 lib/shaders/ 目录下。

  5. 自定义着色器文件并生成目标：

    # 自定义着色文件并生成 Dart 着色器目标
umbra generate example.glsl --target=dart-shader

更多关于Flutter命令行工具插件umbra_cli的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter命令行工具插件umbra_cli的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用Flutter命令行工具插件umbra_cli的示例代码和说明。umbra_cli 是一个假设存在的插件，用于演示目的，实际中可能需要根据具体插件的文档进行调整。假设 umbra_cli 提供了生成阴影（shadow）资源的功能。

安装 umbra_cli

首先，你需要全局安装 umbra_cli。这通常通过 Dart 的 pub 工具完成，但因为是命令行工具，假设它有一个全局可执行文件。

dart pub global activate umbra_cli

使用 umbra_cli 生成阴影资源

假设 umbra_cli 提供了生成阴影资源的功能，你可以通过命令行来生成这些资源。

1. 生成基本阴影

umbra_cli generate --input=assets/images --output=assets/generated_shadows --config=config.yaml
  • --input 指定输入图片目录。
  • --output 指定输出阴影图片目录。
  • --config 指定配置文件路径。

配置文件 config.yaml 示例

shadow_offset:
  dx: 5
  dy: 10
shadow_blur: 15
shadow_color: "#00000088" # 50%不透明的黑色

2. 在 Flutter 项目中使用生成的阴影资源

在 Flutter 项目中，你可以像使用其他资源一样使用生成的阴影资源。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Umbra CLI Demo'),
        ),
        body: Center(
          child: Image.asset('assets/generated_shadows/example_shadow.png'),
        ),
      ),
    );
  }
}

确保在 pubspec.yaml 中添加生成的资源路径：

flutter:
  assets:
    - assets/generated_shadows/example_shadow.png

自动化脚本（可选）

为了简化每次手动运行命令的过程，你可以创建一个自动化脚本。例如，在 tools/ 目录下创建一个 generate_shadows.sh 脚本：

#!/bin/bash

# Generate shadows using umbra_cli
umbra_cli generate --input=assets/images --output=assets/generated_shadows --config=config.yaml

然后，在 package.json 中添加一个脚本命令来运行这个脚本（虽然 Flutter 项目通常不使用 package.json，但这里仅作为示例展示如何集成到自动化流程中。实际中，你可以在 CI/CD 管道中或在其他构建脚本中调用这个 shell 脚本）。

{
  "scripts": {
    "generate-shadows": "./tools/generate_shadows.sh"
  }
}

注意：实际项目中，Flutter 项目通常使用 Makefile 或其他构建工具来管理这些任务。

总结

以上示例展示了如何使用假设的 umbra_cli 命令行工具插件来生成阴影资源，并在 Flutter 项目中使用这些资源。实际使用中，你需要根据 umbra_cli 的具体文档和命令行参数进行调整。

回到顶部