Flutter自定义功能插件brick

Flutter自定义功能插件brick_oven的使用

Brick Oven 是一个强大的工具，用于生成和格式化砖模板（brick templates），它基于 mason 框架。通过简单地激活并配置 brick_oven.yaml 文件，你可以轻松地创建自定义模板。

快速开始

首先，你需要在全局范围内安装 Brick Oven：

# 🎯 激活插件
dart pub global activate brick_oven

接下来，创建并配置 brick_oven.yaml 文件。这一步是必要的，因为该文件定义了你想要生成的模板结构和变量。

最后，使用以下命令来生成你的砖模板：

# 🎛 烤制你的砖块 🧱
brick_oven cook all

或者，如果你想只烤制特定的砖块，可以使用：

# 🎛 烤制特定的砖块
brick_oven cook &lt;BRICK_NAME&gt;

设置烤炉

为了更好地使用 Brick Oven，你可以利用 JSON Schema 来获得智能提示和验证支持。

如果你使用的是 VSCode，可以在项目的 settings.json 中添加以下内容来包含该模式：

{
  "yaml.schemas": {
    "https://raw.githubusercontent.com/mrgnhnt96/brick_oven/master/schema/brick_oven.yaml.schema.json": "brick_oven.yaml"
  }
}

你还可以查看测试文件夹中的例子来了解如何使用 brick_oven.yaml 文件。这些例子位于：

https://github.com/mrgnhnt96/brick_oven/blob/master/test/e2e/sources

内容配置

Brick Oven 在内容配置方面表现出色。由于它本质上是一个“搜索与替换”工具，因此你可以自由地格式化文件中的“占位符”。

输出目录

默认情况下，输出目录为 bricks。你可以通过 output 参数来修改这个值。生成的内容将被放置在 BRICK_NAME/__brick__/ 目录下，这一部分无法更改。

变量名称

为了避免不必要的替换，建议你在占位符前加上前缀或后缀（例如 _）和某种形式的大小写格式（如 CONSTANT_CASE）。例如，_NAME_。

变量顺序

在替换占位符时，遵循以下顺序：sections、vars 和 partials。为了避免意外替换子名称，建议使用多个占位符，并按长度从大到小排序。

片段（Partials）

片段是一种重用模板的方法。Brick Oven 支持嵌套在文件夹内的片段，但 Mason 尚未支持。Brick Oven 通过将片段重新定位到项目根目录来处理此问题。这意味着所有片段必须具有唯一的文件名。

片段语法

partials.*

例如，如果有一个名为 hello_world.dart 的片段，可以通过 partials.hello_world 访问它（扩展名是可选的）。

URLS

URLs 是没有文件扩展名的空文本文件。

区段（Sections）

区段（也称为 Lambda）用于定义代码块的起始和结束。它们不会被格式化，也不区分大小写。

区段语法

section*
endSection*
invertSection*

内置变量

内置变量帮助你在遍历列表时获取索引值。

_INDEX_VALUE_
.

条件区段（Conditional Sections）

条件区段用于定义条件语句。它们不区分大小写。

条件区段语法

*if
*ifNot
*endIf

大小写格式化

你可以使用不同的格式来改变变量的大小写。

格式化语法

*snake, *snakecase

示例代码

以下是一个简单的 Dart 示例代码，展示了如何使用 Brick Oven 生成自定义类。

// example/main.dart
part '_CLASS_NAME_snake.dart';

class _CLASS_NAME_pascal {
  const _CLASS_NAME_pascal({
    required this.name,
    required this.value,
  });

  const _CLASS_NAME_pascal._private()
      : name = '',
        value = '';

  final String name;
  final String value;
}

更多关于Flutter自定义功能插件brick_oven的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•1 天前

更多关于Flutter自定义功能插件brick_oven的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中自定义和使用一个名为brick_oven的插件的示例代码。假设brick_oven插件提供了某些自定义功能，比如显示一个自定义的砖块布局。

1. 创建`brick_oven`插件

首先，我们假设brick_oven插件已经存在，或者我们按照Flutter插件开发的流程创建一个简单的插件。以下是插件的基本结构：

`brick_oven/lib/brick_oven.dart`

import 'package:flutter/material.dart';

class BrickOven extends StatelessWidget {
  final List<Widget> bricks;

  const BrickOven({Key? key, required this.bricks}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 假设每行显示2个砖块
        crossAxisSpacing: 4.0,
        mainAxisSpacing: 4.0,
      ),
      itemCount: bricks.length,
      itemBuilder: (context, index) {
        return DecoratedBox(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey),
            borderRadius: BorderRadius.circular(8),
          ),
          child: bricks[index],
        );
      },
    );
  }
}

2. 发布插件（可选）

如果这是一个公共插件，你需要发布到pub.dev。但在这个示例中，我们假设它是本地插件。

3. 在Flutter应用中使用`brick_oven`插件

`pubspec.yaml`

首先，在Flutter应用的pubspec.yaml文件中添加对本地插件的依赖（假设插件在项目的根目录下的bricks文件夹中）：

dependencies:
  flutter:
    sdk: flutter
  brick_oven:
    path: ./bricks

`lib/main.dart`

然后，在你的Flutter应用中使用这个插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<Widget> bricks = [
    Container(color: Colors.red, height: 100, width: 100),
    Container(color: Colors.green, height: 100, width: 100),
    Container(color: Colors.blue, height: 100, width: 100),
    Container(color: Colors.yellow, height: 100, width: 100),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Brick Oven Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: BrickOven(bricks: bricks),
      ),
    );
  }
}

4. 运行应用

确保你已经运行了flutter pub get来获取依赖，然后在你的Flutter项目中运行应用：

flutter run

这样，你的Flutter应用就会显示一个包含4个彩色砖块的网格布局，这些砖块由BrickOven插件提供和渲染。

这个示例展示了如何创建和使用一个简单的Flutter自定义插件。当然，在实际项目中，brick_oven插件可能会包含更复杂的逻辑和功能。

Flutter自定义功能插件brick_oven的使用