Flutter内容生成插件flutter_storyblok_code_generator的使用

Flutter内容生成插件flutter_storyblok_code_generator的使用

获取开始

在使用flutter_storyblok_code_generator之前，您需要从Storyblok中获取以下信息：

  1. Space ID：

    • 在Storyblok中，您可以从 设置 > 常规 > 空间 中找到。

  2. 个人访问令牌：

    • 在Storyblok中，您可以从 我的账户 > 安全 > 个人访问令牌 中找到。

安装

首先，将插件添加到项目的dev_dependencies中：

flutter pub add dev:flutter_storyblok_code_generator

运行生成器

在项目目录中运行以下命令来启动生成器：

dart run flutter_storyblok_code_generator generate -s <space_id> -p <pat>

使用

脚本

Usage: flutter_storyblok_code_generator generate [arguments]
-h, --help                                 打印此用法信息。
-s, --space_id (mandatory)                 您的Storyblok空间ID
-p, --personal_access_token (mandatory)    您的个人访问令牌，而不是空间访问令牌
-l, --space_location                       空间的服务器位置
                                           [eu (默认值), us, ca, ap, cn]
-r, --rate_limit                           您的速率限制（根据您的计划）
                                           （默认为 "3"）
-o, --output_path                          输出文件 "bloks.generated.dart" 将被创建的目录路径
                                           （默认为 "lib"）

这将多次调用管理API以获取“块库”中的所有块、所有数据源及其条目、外部数据源等。如果您使用的不是社区计划，请确保正确设置速率限制。

生成的代码

脚本会生成一个名为bloks.generated.dart的文件，该文件包含所有的内部数据源、外部数据源、块等。

数据源被生成为enum类型，并且它们的条目作为枚举值。

在块库中找到的块被生成为sealed class Blok的子类，用于构建小部件时的穷尽检查，帮助开发者处理所有块和任何未来的块。

当在视觉编辑器中创建新块后运行脚本时，将会生成一个新的Blok类，导致穷尽检查发出错误，提醒开发人员需要实现哪个小部件。

enum PageIcons {
  home,
  about,
  unknown;
}

sealed class Blok {
  factory Blok.fromJson(Map<String, dynamic> json);
}

final class Page extends Blok {
  final String title;
  final PageIcons icon;
  final List<Blok> body;
}

由于sealed class Blok是生成的，因此它不会在SDK中立即可用。要将生成的块连接到SDK，必须将Blok.fromJson工厂方法传递给StoryblokClient。这将连接泛型约束，以便由StoryblokClient返回的所有Story对象都具有content属性为Blok。

功能

生成器处理所有使用component_whitelist的字段，例如Blocks，通过声明该字段为这些白名单类型或如果只有一种块被白名单，则声明该字段为此块，例如Page。

生成器还处理诸如Blocks上的maximum和数字上的decimals之类的参数，通过声明字段为List<Blok>或只是Blok，以及double或int。

构建小部件

当构建表示每个块的小部件时，开发人员可以自由选择他们喜欢的解决方案。

在Example项目中，解决方案是创建一个带有Widget buildWidget(BuildContext)函数的extension on Blok，该函数在其自身上进行切换，并借助穷尽检查以静态和空安全的方式创建每个小部件。

extension BlockWidget on Blok {
  Widget buildWidget(BuildContext context) => switch (this) {
    final Page page => Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            switch (page.icon) {
              PageIcons.home => Icon(Icons.home),
              PageIcons.home => Icon(Icons.about),
              PageIcons.unknown => SizedBox.shrink(),
            },
            Text(page.title),
          ],
        ),
      ),
      body: Column(
        children: page.body.map((block) => block.buildWidget(context)).toList(),
      ),
    ),
    UnrecognizedBlock() => kDebugMode ? Placeholder() : SizedBox.shrink(),
  };
}

更多关于Flutter内容生成插件flutter_storyblok_code_generator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter内容生成插件flutter_storyblok_code_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 flutter_storyblok_code_generator 插件的示例代码案例。这个插件通常用于从 Storyblok CMS 自动生成 Flutter 代码，以便快速集成内容。

首先，确保你已经添加了 flutter_storyblok_code_generator 到你的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  flutter_storyblok_client: ^latest_version  # 你可能需要这个客户端库来与Storyblok交互

dev_dependencies:
  build_runner: ^latest_version
  flutter_storyblok_code_generator: ^latest_version

替换 ^latest_version 为实际的最新版本号。

1. 设置 Storyblok Client

在你的 Flutter 项目中，创建一个 storyblok_service.dart 文件来配置 Storyblok 客户端：

import 'package:flutter_storyblok_client/flutter_storyblok_client.dart';

class StoryblokService {
  final StoryblokClient _client;

  StoryblokService({required String accessToken})
      : _client = StoryblokClient(accessToken: accessToken);

  Future<dynamic> fetchContent(String slug) async {
    final response = await _client.getStory(slug: slug);
    return response.data;
  }
}

2. 使用 flutter_storyblok_code_generator 生成代码

为了使用 flutter_storyblok_code_generator，你需要创建一个 Storyblok schema JSON 文件，并放在你的 Flutter 项目中，比如 schemas/my_schema.json。

假设你的 my_schema.json 内容如下：

{
  "name": "article",
  "display_field": "title",
  "components": [
    {
      "name": "title",
      "type": "text",
      "schema": {}
    },
    {
      "name": "body",
      "type": "richtext",
      "schema": {}
    }
  ]
}

3. 运行代码生成器

在你的项目根目录下，运行以下命令以生成 Flutter 数据模型：

flutter pub run build_runner build --delete-conflicting-outputs

这个命令会读取你的 schemas/my_schema.json 文件，并生成相应的 Dart 数据模型文件。通常，生成的文件会放在 lib/generated/ 目录下。

4. 使用生成的数据模型

假设生成的数据模型文件名为 article_model.dart，你可以像这样使用它：

import 'package:flutter/material.dart';
import 'package:your_app/generated/article_model.dart'; // 根据实际生成的文件路径调整
import 'package:your_app/services/storyblok_service.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late ArticleModel article;

  @override
  void initState() {
    super.initState();
    final storyblokService = StoryblokService(accessToken: 'your_access_token');
    storyblokService.fetchContent('your_slug').then((data) {
      setState(() {
        article = ArticleModel.fromJson(data);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(article.title ?? 'Loading...'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(article.body ?? 'Loading...'),
        ),
      ),
    );
  }
}

在这个例子中，ArticleModel 是由 flutter_storyblok_code_generator 自动生成的，用于解析从 Storyblok 获取的 JSON 数据。

注意事项

  • 确保你已经正确配置了 Storyblok 的访问令牌（access token）。
  • 如果你的 Storyblok schema 发生变化，记得重新运行代码生成器。
  • 检查生成的模型文件路径，并在你的代码中正确引用它们。

这个示例展示了如何使用 flutter_storyblok_code_generator 插件来自动生成和使用 Storyblok 内容的数据模型。希望这对你有所帮助！

回到顶部