Flutter视频进度控制插件smooth_video_progress的使用

在开发Flutter应用时，创建一个流畅的用户体验是至关重要的。当你使用video_player插件创建视频播放器时，可能会遇到进度条更新过于频繁或不流畅的问题，这会使得用户体验显得不够顺滑。为了解决这个问题，smooth_video_progress插件应运而生，它能让您的视频进度条看起来更加平滑。

功能特性

• 为video_player的VideoPlayerController实例构建平滑插值的进度条。
• 设计完全自由，可以根据需要自定义样式。
• 可用于进度条、加载指示器（spinners）、更精确的时间显示等。

开始使用

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

dependencies:
  smooth_video_progress: ^latest_version # 替换为最新版本号
  flutter_hooks: ^any_version # 版本号根据需要选择

然后执行flutter pub get来安装这些包。

使用示例

下面是一个完整的例子，展示了如何使用smooth_video_progress来创建一个带有平滑进度条的视频播放器。我们将通过一个简单的Flutter应用程序来演示这一点。

完整示例代码

import 'package:flutter/material.dart';
import 'package:smooth_video_progress/smooth_video_progress.dart';
import 'package:video_player/video_player.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smooth Video Progress Demo',
      theme: ThemeData.from(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink),
          useMaterial3: true),
      home: const MyHomePage(title: 'Smooth Video Progress'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late final VideoPlayerController _controller;
  Size _videoSize = Size(1, 1);

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
      "https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4",
      videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
    )
      ..setLooping(true)
      ..setVolume(0)
      ..initialize().then((_) {
        // 确保初始化完成后设置状态
        setState(() {
          _videoSize = _controller.value.size;
        });
        _controller.play();
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Center(
                child: AspectRatio(
                  aspectRatio: _videoSize.aspectRatio,
                  child: VideoPlayer(_controller),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  Text(
                    "Without SmoothVideoProgress:",
                    style: Theme.of(context).textTheme.labelLarge,
                  ),
                  ValueListenableBuilder<VideoPlayerValue>(
                    valueListenable: _controller,
                    builder: (context, value, _) => _VideoProgressSlider(
                      position: value.position,
                      duration: value.duration,
                      controller: _controller,
                      swatch: Colors.red,
                    ),
                  ),
                  const Divider(height: 16),
                  Text(
                    "With SmoothVideoProgress:",
                    style: Theme.of(context).textTheme.labelLarge,
                  ),
                  SmoothVideoProgress(
                    controller: _controller,
                    builder: (context, position, duration, _) =>
                        _VideoProgressSlider(
                      position: position,
                      duration: duration,
                      controller: _controller,
                      swatch: Colors.greenAccent,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

class _VideoProgressSlider extends StatelessWidget {
  const _VideoProgressSlider({
    Key? key,
    required this.position,
    required this.duration,
    required this.controller,
    required this.swatch,
  }) : super(key: key);

  final Duration position;
  final Duration duration;
  final VideoPlayerController controller;
  final Color swatch;

  @override
  Widget build(BuildContext context) {
    final max = duration.inMilliseconds.toDouble();
    final value = position.inMilliseconds.clamp(0, max).toDouble();

    return Theme(
      data: ThemeData.from(
        colorScheme: ColorScheme.fromSeed(seedColor: swatch),
        useMaterial3: true,
      ),
      child: Slider(
        min: 0,
        max: max,
        value: value,
        onChanged: (value) =>
            controller.seekTo(Duration(milliseconds: value.toInt())),
        onChangeStart: (_) => controller.pause(),
        onChangeEnd: (_) => controller.play(),
      ),
    );
  }
}

在这个例子中，我们创建了一个包含两个进度条的应用程序：一个是普通的进度条，另一个则是使用了smooth_video_progress的平滑进度条。你可以看到两者的区别，并体验到smooth_video_progress带来的流畅感。

希望这个指南对你有所帮助！如果你有任何问题或者需要进一步的帮助，请随时提问。