Flutter字幕显示插件fast_subtitle的使用

Flutter字幕显示插件fast_subtitle的使用

在Flutter中，fast_subtitle 是一个非常实用的插件，用于显示字幕。本文将通过完整的示例代码展示如何使用该插件来实现字幕显示功能。

使用步骤

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 fast_subtitle 依赖：

dependencies:
  fast_subtitle: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

2. 创建主应用文件

接下来，创建一个主应用文件 lib/main.dart，并在其中集成 fast_subtitle 插件。

示例代码

// example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:fast_subtitle/fast_subtitle.dart'; // 导入fast_subtitle插件

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 字幕显示示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '字幕显示示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义字幕控制器
  final FastSubtitleController _subtitleController = FastSubtitleController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示字幕区域
            FastSubtitle(
              controller: _subtitleController,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            // 按钮用于触发字幕更新
            ElevatedButton(
              onPressed: () {
                // 更新字幕内容
                _subtitleController.updateSubtitle('这是新的字幕内容');
              },
              child: Text('更新字幕'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 运行应用

运行上述代码后，您会看到一个带有按钮的应用界面。点击按钮时，字幕区域会更新为新的字幕内容。

关键代码解析

  1. 导入插件：

    import 'package:fast_subtitle/fast_subtitle.dart';

    这里导入了 fast_subtitle 插件的核心类。

  2. 定义字幕控制器：

    final FastSubtitleController _subtitleController = FastSubtitleController();

    FastSubtitleController 是管理字幕的主要类，用于控制字幕的更新和显示。

  3. 初始化字幕组件：

    FastSubtitle(
  controller: _subtitleController,
  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)

    FastSubtitle 是用于显示字幕的核心组件，通过 controller 属性绑定到 FastSubtitleController 实例，并设置样式。

  4. 更新字幕内容：

    _subtitleController.updateSubtitle('这是新的字幕内容');

更多关于Flutter字幕显示插件fast_subtitle的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter字幕显示插件fast_subtitle的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


fast_subtitle 是一个用于在 Flutter 应用中显示字幕的插件。它支持从本地文件或网络加载字幕，并可以轻松地与视频播放器集成，以同步显示字幕。以下是如何使用 fast_subtitle 插件的详细步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 fast_subtitle 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  fast_subtitle: ^0.0.1  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 fast_subtitle 包：

import 'package:fast_subtitle/fast_subtitle.dart';

3. 加载字幕文件

你可以从本地文件或网络加载字幕文件。以下是两种方式的示例：

从本地文件加载字幕

String subtitlePath = 'assets/subtitles.srt';  // 字幕文件路径
String subtitleContent = await rootBundle.loadString(subtitlePath);

从网络加载字幕

String subtitleUrl = 'https://example.com/subtitles.srt';
String subtitleContent = await http.get(subtitleUrl).then((response) => response.body);

4. 解析字幕

使用 FastSubtitle 类来解析字幕内容：

FastSubtitle subtitle = FastSubtitle.fromString(subtitleContent);

5. 显示字幕

你可以在视频播放器的 onPositionChanged 回调中获取当前时间戳，并使用 subtitle.getSubtitleAtTime 方法获取当前时间的字幕，然后将其显示在 UI 上。

class SubtitleDisplay extends StatefulWidget {
  final FastSubtitle subtitle;
  final VideoPlayerController controller;

  SubtitleDisplay({required this.subtitle, required this.controller});

  [@override](/user/override)
  _SubtitleDisplayState createState() => _SubtitleDisplayState();
}

class _SubtitleDisplayState extends State<SubtitleDisplay> {
  String currentSubtitle = '';

  [@override](/user/override)
  void initState() {
    super.initState();
    widget.controller.addListener(_updateSubtitle);
  }

  [@override](/user/override)
  void dispose() {
    widget.controller.removeListener(_updateSubtitle);
    super.dispose();
  }

  void _updateSubtitle() {
    Duration currentPosition = widget.controller.value.position;
    String subtitle = widget.subtitle.getSubtitleAtTime(currentPosition);
    if (subtitle != currentSubtitle) {
      setState(() {
        currentSubtitle = subtitle;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text(
      currentSubtitle,
      style: TextStyle(color: Colors.white, fontSize: 16),
      textAlign: TextAlign.center,
    );
  }
}

6. 集成到视频播放器

将 SubtitleDisplay 组件与视频播放器集成：

class VideoPlayerWithSubtitles extends StatelessWidget {
  final VideoPlayerController controller;
  final FastSubtitle subtitle;

  VideoPlayerWithSubtitles({required this.controller, required this.subtitle});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        VideoPlayer(controller),
        Positioned(
          bottom: 20,
          left: 0,
          right: 0,
          child: SubtitleDisplay(subtitle: subtitle, controller: controller),
        ),
      ],
    );
  }
}

7. 使用示例

最后，在应用中使用 VideoPlayerWithSubtitles 组件：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    VideoPlayerController controller = VideoPlayerController.network('https://example.com/video.mp4');
    FastSubtitle subtitle = FastSubtitle.fromString(subtitleContent);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Video with Subtitles')),
        body: VideoPlayerWithSubtitles(controller: controller, subtitle: subtitle),
      ),
    );
  }
}
回到顶部