flutter如何实现仿抖音进度条效果

在Flutter中如何实现类似抖音视频播放时的底部进度条效果？具体想实现那种随着视频播放动态前进的彩色进度条，并且可以支持拖动跳转进度。目前尝试了一些自定义绘制的方法，但动画效果和手势交互总是无法完美结合，想请教大家有没有成熟的实现方案或者推荐的相关插件？

2 回复

使用Flutter实现仿抖音进度条效果，可通过以下步骤：

  1. 使用Stack和LinearProgressIndicator组合。
  2. 自定义进度条样式，设置分段颜色和动画。
  3. 通过AnimationController控制进度条动画。
  4. 监听视频播放进度，动态更新进度条。

代码示例：

LinearProgressIndicator(
  value: _progressValue,
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

更多关于flutter如何实现仿抖音进度条效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现仿抖音的进度条效果，可以通过以下步骤完成：

1. 基本思路

  • 使用Row或Stack布局多个进度条
  • 每个进度条使用LinearProgressIndicator或自定义Container实现
  • 通过动画控制器控制进度动画
  • 支持点击切换和自动播放

2. 核心代码实现

import 'package:flutter/material.dart';

class DouyinProgressBar extends StatefulWidget {
  final int itemCount;
  final int currentIndex;
  final Duration duration;
  final VoidCallback? onNext;

  const DouyinProgressBar({
    Key? key,
    required this.itemCount,
    required this.currentIndex,
    this.duration = const Duration(seconds: 3),
    this.onNext,
  }) : super(key: key);

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

class _DouyinProgressBarState extends State<DouyinProgressBar>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: widget.duration,
    )..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          widget.onNext?.call();
        }
      });
    _controller.forward();
  }

  @override
  void didUpdateWidget(DouyinProgressBar oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.currentIndex != widget.currentIndex) {
      _controller.reset();
      _controller.forward();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Row(
        children: List.generate(widget.itemCount, (index) {
          return Expanded(
            child: Container(
              height: 2,
              margin: const EdgeInsets.symmetric(horizontal: 2),
              decoration: BoxDecoration(
                color: Colors.grey.withOpacity(0.5),
                borderRadius: BorderRadius.circular(1),
              ),
              child: Stack(
                children: [
                  // 背景
                  Container(
                    width: double.infinity,
                    height: double.infinity,
                    color: Colors.grey.withOpacity(0.5),
                  ),
                  // 进度条
                  if (index == widget.currentIndex)
                    AnimatedBuilder(
                      animation: _controller,
                      builder: (_, __) {
                        return Container(
                          width: MediaQuery.of(context).size.width *
                              _controller.value,
                          height: double.infinity,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(1),
                          ),
                        );
                      },
                    )
                  else if (index < widget.currentIndex)
                    Container(
                      width: double.infinity,
                      height: double.infinity,
                      color: Colors.white,
                    ),
                ],
              ),
            ),
          );
        }),
      ),
    );
  }
}

3. 使用方法

// 在页面中使用
DouyinProgressBar(
  itemCount: 5,
  currentIndex: _currentIndex,
  onNext: () {
    setState(() {
      _currentIndex = (_currentIndex + 1) % 5;
    });
  },
)

4. 功能特点

  • 支持自定义进度条数量
  • 自动播放和手动切换
  • 平滑的动画过渡
  • 可自定义进度条颜色和高度

5. 扩展建议

  • 添加点击切换功能
  • 支持暂停/继续播放
  • 自定义动画曲线
  • 添加进度回调监听

这个实现提供了抖音进度条的核心功能，你可以根据实际需求进一步调整样式和交互逻辑。

回到顶部