Flutter提词器插件teleprompter的使用

teleprompter 是一个用于在Flutter应用中创建提词器功能的插件。它支持自动滚动文本、录制视频并自动保存到相册等功能。

功能特性

• 在应用中播放生成的文本，并带有自动滚动功能。
• 直接在应用内录制视频。
• 停止录制后自动保存到相册。

为什么开发这个包

开发者最初是在一个押韵词典应用中实现了提词器功能，但随着代码复杂度增加（大约一千行代码），决定将这部分功能解耦并打包成一个独立的插件，以便于测试和复用。

快速开始

添加依赖

首先，在项目的 pubspec.yaml 文件中添加 teleprompter 依赖：

dependencies:
  teleprompter: ^0.0.10

或者直接在项目根目录运行以下命令来添加依赖：

flutter pub add teleprompter

使用示例

下面是一个完整的示例，展示了如何使用 teleprompter 插件。

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

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

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

  @override
  Widget build(BuildContext context) {
    const String text = '''
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin elit id ex pellentesque, vitae blandit neque pulvinar...
'''; // 省略部分文本以简洁展示

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData.dark().copyWith(
        textTheme: ThemeData.dark().textTheme.apply(
              bodyColor: Colors.white,
              displayColor: Colors.white,
            ),
      ),
      home: const HomeScreen(text: text),
    );
  }
}

class HomeScreen extends StatefulWidget {
  final String text;

  const HomeScreen({
    required this.text,
    super.key,
  });

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  TextEditingController textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    textEditingController.text = widget.text;
    textEditingController.selection = const TextSelection(baseOffset: 0, extentOffset: 0);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            onPressed: () => Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => const RecordingScreen()),
            ),
            icon: const Icon(Icons.timer),
          ),
          title: const Text('Teleprompter'),
        ),
        body: Container(
          margin: const EdgeInsets.all(10),
          child: TextField(
            controller: textEditingController,
            decoration: InputDecoration(
              contentPadding: const EdgeInsets.all(10),
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
              hintText: "Text for teleprompter",
            ),
            scrollPadding: const EdgeInsets.all(20.0),
            keyboardType: TextInputType.multiline,
            maxLines: 99999,
            autofocus: true,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.play_arrow),
          onPressed: () => Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => TeleprompterWidget(text: textEditingController.text),
            ),
          ),
        ),
      ),
    );
  }
}

class RecordingScreen extends StatefulWidget {
  const RecordingScreen({super.key});

  @override
  _RecordingScreenState createState() => _RecordingScreenState();
}

class _RecordingScreenState extends State<RecordingScreen> {
  bool started = false;
  bool showHours = true;
  bool showMinutes = true;
  bool showSeconds = true;
  bool showMilliseconds = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Timer Test')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Checkbox(value: showHours, onChanged: (val) { setState(() => showHours = val!); }),
                  const Text('Hours'),
                  Checkbox(value: showMinutes, onChanged: (val) { setState(() => showMinutes = val!); }),
                  const Text('Minutes'),
                  Checkbox(value: showSeconds, onChanged: (val) { setState(() => showSeconds = val!); }),
                  const Text('Seconds'),
                  Checkbox(value: showMilliseconds, onChanged: (val) { setState(() => showMilliseconds = val!); }),
                  const Text('Milliseconds'),
                ],
              ),
            ),
            const Text('Stopwatch', style: TextStyle(fontSize: 20)),
            const SizedBox(height: 10),
            if (!started) ...[
              const SizedBox(height: 10),
              ElevatedButton(child: const Text('Start'), onPressed: () { setState(() => started = true); }),
            ],
            if (started) ...[
              StopwatchWidget(
                showHours: showHours,
                showMinutes: showMinutes,
                showSeconds: showSeconds,
                showMilliseconds: showMilliseconds,
                style: const TextStyle(fontSize: 12),
              ),
              const SizedBox(height: 10),
              ElevatedButton(child: const Text('Hide'), onPressed: () { setState(() => started = false); }),
            ],
          ],
        ),
      ),
    );
  }
}

iOS 配置

为了使插件的功能正常工作，请确保在 ios/Runner/Info.plist 中添加以下权限描述：

<key>NSCameraUsageDescription</key>
<string>Need camera to record video image</string>
<key>NSMicrophoneUsageDescription</key>
<string>Need microphone to record video audio</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Need access to library to save the video</string>

Android 配置

请确保在 android/app/build.gradle 文件中设置最低 SDK 版本为 21 或更高：

minSdkVersion 21

更多信息

该插件还提供了一个计时器小部件 StopwatchWidget()，可以方便地集成到你的项目中进行显示。

贡献和支持

如果你有兴趣贡献代码或报告问题，请访问 GitHub。同时欢迎给我们的 pub.dev 页面点赞支持！