Flutter插件superdeck的介绍与使用

SuperDeck 是一个允许你在 Flutter 应用程序中直接创建视觉上吸引人且交互性强的演示文稿的插件。通过使用 Markdown 的简洁性和强大功能，你可以轻松地设计出高质量的演示文稿。

查看演示

查看演示

示例代码

查看示例代码

Flutter插件superdeck开始使用

以下是将 SuperDeck 集成到你的 Flutter 项目中的步骤：

1. 安装 superdeck 包：

   flutter pub add superdeck
   

2. 在 Dart 代码中导入 superdeck 包：

   import 'package:superdeck/superdeck.dart';
   

3. 初始化 SuperDeck 并运行应用：

   void main() {
     runApp(const SuperDeckApp());
   }
   

4. 在项目的根目录下创建一个 slides.md 文件。

5. 配置 pubspec.yaml 文件以包含必要的资源：

   flutter:
     assets:
       - assets/
       - assets/images/
   

   assets 目录用于存放滑动和资源引用，而 assets/images 目录专门用于存储演示文稿中使用的图片。

6. 对于 macOS 系统，修改 Release.entitlements 文件：

   <dict>
      <key>com.apple.security.app-sandbox</key>
      <false/>
      <key>com.apple.security.network.client</key>
      <true/>
   </dict>
   

   修改 DebugProfile.entitlements 文件：

   <dict>
      <key>com.apple.security.app-sandbox</key>
      <false/>
      <key>com.apple.security.cs.allow-jit</key>
      <true/>
      <key>com.apple.security.network.server</key>
      <true/>
      <key>com.apple.security.network.client</key>
      <true/>
   </dict>
   

7. 在 slides.md 文件中开始构建你的幻灯片，使用 Markdown 语法和 SuperDeck 的幻灯片模板及配置。

SuperDeck 选项

风格 (style)

SuperDeck 提供了一个强大的样式系统，通过利用 Mix，可以完全控制每个元素的样式，并创建无限可能的样式变体。

示例 (examples)

这些是可以引用在幻灯片中的小部件示例。你可以在 Widget Template 部分了解更多关于如何引用这些示例的信息。

SuperDeckApp(
   style: style,
   examples: [
      Example(
         name: 'demo',
         builder: (args) {
            return CustomWidget();
         },
      ),
   ],
);

共享幻灯片选项

一些共享选项可以通过在项目的根目录下添加一个 superdeck.yaml 文件来应用。这些选项将应用于所有幻灯片，除非被特定幻灯片的选项覆盖。

幻灯片选项

以下是一些可用于配置每张幻灯片的选项。所有选项都是可选的。

标题 (title)

幻灯片的标题。

背景 (background)

幻灯片上显示的背景图像。可以使用 URL 或本地资产路径。

内容 (content)

幻灯片的 Markdown 内容。这是使用 Markdown 语法编写幻灯片主要内容的地方。

风格变体 (style)

这将是应用于幻灯片的样式变体。你可以使用 Mix 定义样式变体并传递给 SuperDeck 构造函数。

过渡效果 (transition)

当导航到幻灯片时应用的过渡效果。

布局 (layout)

选择幻灯片布局模板。可用选项包括：simple，two_column，two_column_header，image 和 widget。

模板

SuperDeck 提供了一组多样的模板，每个模板都设计为满足不同的演示需求。从简单的文本幻灯片到带有图片和列的复杂布局，你可以轻松找到适合你的内容的模板。

简单模板（默认）

一个简单的模板用于你的演示文稿。

background: https://source.unsplash.com/random/900×700/?landscape

引言 SuperDeck

创建 吸引人，可定制 的演示文稿。

#### 双栏模板
适用于并排呈现比较或互补信息的理想模板。

---
layout: two_column
---

::left::

# 产品 A
- 特点 1
- 特点 2

::right::

# 产品 B
- 特点 X
- 特点 Y

双栏头部模板

类似于双栏模板，但顶部有一个额外的头部部分。

layout: two_column_header

::header::

产品对比

::left::

产品 A

• 特点 1
• 特点 2
• 特点 3

::right::

产品 B

• 特点 X
• 特点 Y
• 特点 Z

#### 图像模板
在幻灯片内容旁边显示一张图片。

---
layout: image
options:
  src: https://source.unsplash.com/random/900×700/?nature
  fit: cover
  position: left
---

# 关键特性

- 创新设计
- 用户友好
- 节能高效

小部件模板

在幻灯片中嵌入自定义小部件。

layout: widget options: name: demo position: center flex: 1 args: customArg: value customArg2: value2

自定义小部件

此幻灯片包含一个自定义小部件。

### 示例代码

```dart
import 'package:flutter/material.dart';
import 'package:superdeck/superdeck.dart';

import 'src/style.dart';
import 'src/widget/mix_demo.dart';

void main() async {
  await SuperDeckApp.initialize();
  runApp(
    Builder(builder: (context) {
      return MaterialApp(
        title: 'Superdeck',
        debugShowCheckedModeBanner: false,
        home: SuperDeckApp(
          style: style,
          // ignore: prefer_const_literals_to_create_immutables
          examples: [
            Example(
              name: 'demo',
              schema: ExampleOptions.schema,
              builder: (args) {
                return Center(
                  child: Container(
                    height: args.height,
                    width: args.width,
                    color: Colors.blue,
                    alignment: Alignment.center,
                    child: Text(args.text),
                  ),
                );
              },
            ),
          ],
        ),
      );
    }),
  );
}