Flutter Deck 使用教程

Flutter Deck 使用教程

flutter_deckA lightweight, customizable, and easy-to-use framework to create presentations in Flutter.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_deck

1、项目介绍

Flutter Deck 是一个轻量级、可自定义且易于使用的框架，用于在 Flutter 中创建演示文稿。它提供了丰富的功能，包括幻灯片生成、主题定制、本地化支持和控制管理等。

2、项目快速启动

安装依赖

首先，确保你已经安装了 mason_cli：

dart pub global activate mason_cli

然后，安装 flutter_deck_slide 模板：

mason add flutter_deck_slide

生成新幻灯片

使用以下命令生成一个新的幻灯片：

mason make flutter_deck_slide

定制主题

你可以通过提供 FlutterDeckThemeData 来定制幻灯片的主题：

return FlutterDeckApp(
  lightTheme: FlutterDeckThemeData.fromTheme(
    ThemeData.from(
      colorScheme: ColorScheme.fromSeed(
        seedColor: const Color(0xFFB5FFFC),
      ),
      useMaterial3: true,
    ),
  ),
  darkTheme: FlutterDeckThemeData.fromTheme(
    ThemeData.from(
      colorScheme: ColorScheme.fromSeed(
        seedColor: const Color(0xFF16222A),
        brightness: Brightness.dark,
      ),
      useMaterial3: true,
    ),
  ),
);

创建入口点

创建两个入口点，一个用于演示者视图，一个用于幻灯片本身：

// main.dart
void main() {
  runApp(const FlutterDeckExample(isPresenterView: false));
}

// main_presenter.dart
void main() {
  runApp(const FlutterDeckExample(isPresenterView: true));
}

启动 WebSocket 服务器

安装 dart_frog_cli 并启动开发服务器：

dart pub global activate dart_frog_cli
dart_frog dev

运行演示文稿

运行两个独立的 Flutter 应用程序：

flutter run -t main.dart
flutter run -t main_presenter.dart

3、应用案例和最佳实践

示例应用

以下是一个简单的示例，展示了如何使用 Flutter Deck 创建一个演示文稿：

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

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

  @override
  Widget build(BuildContext context) {
    return FlutterDeckApp(
      configuration: const FlutterDeckConfiguration(
        background: FlutterDeckBackgroundConfiguration(
          light: FlutterDeckBackground.solid(Color(0xFFB5FFFC)),
          dark: FlutterDeckBackground.solid(Color(0xFF16222A)),
        ),
      ),
      slides: [
        FlutterDeckSlide.blank(
          builder: (context) => const Center(
            child: Text('欢迎使用 Flutter Deck!'),
          ),
        ),
      ],
    );
  }
}

最佳实践

• 主题定制：根据需要定制亮色和暗色主题，以适应不同的演示环境。
• 本地化支持：利用内置的本地化支持，使你的演示文稿能够适应不同的语言环境。
• 控制管理：合理配置控制选项，确保演示过程中的流畅体验。

4、典型生态项目

Flutter Design Patterns

这是一个开源的 OOP 设计模式应用程序，使用 Dart 和 Flutter 构建。它展示了如何将设计模式应用于实际的 Flutter 项目中。

Flutter Design Challenges

这是一个设计挑战集合，使用 Flutter 实现。它提供了各种设计挑战的解决方案，帮助开发者提升 UI 设计能力。

通过这些生态项目，你可以进一步扩展 Flutter Deck 的功能，并将其应用于更广泛的场景中。

flutter_deckA lightweight, customizable, and easy-to-use framework to create presentations in Flutter.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_deck