flutter如何实现bar flutter效果

在Flutter中如何实现类似bar flutter的效果？我尝试了一些方法但效果不理想，有没有推荐的实现方式或插件？希望有具体的代码示例或实现思路。

2 回复

在Flutter中，可通过AnimatedContainer或AnimatedPositioned结合动画控制器实现bar flutter效果。例如，使用AnimatedContainer改变高度或位置，并设置curve: Curves.bounceInOut等曲线模拟抖动。

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


在Flutter中实现类似"bar flutter"效果（通常指动态变化的进度条或波浪动画），可以使用多种方式。以下是几种常见实现方法：

1. 使用内置进度条组件

LinearProgressIndicator(
  value: _progressValue, // 0.0到1.0之间的值
  backgroundColor: Colors.grey[300],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

2. 自定义波浪动画效果

class WaveProgressBar extends StatefulWidget {
  @override
  _WaveProgressBarState createState() => _WaveProgressBarState();
}

class _WaveProgressBarState extends State<WaveProgressBar> 
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.blue, Colors.lightBlue],
        ),
      ),
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return CustomPaint(
            painter: WavePainter(_controller.value),
          );
        },
      ),
    );
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

class WavePainter extends CustomPainter {
  final double value;
  
  WavePainter(this.value);
  
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;
    
    final path = Path();
    final waveHeight = size.height * 0.3;
    final baseHeight = size.height * 0.7;
    
    path.moveTo(0, baseHeight);
    
    for (double i = 0; i <= size.width; i++) {
      final x = i;
      final y = baseHeight + 
          sin((i / size.width * 4 * pi) + value * 2 * pi) * waveHeight;
      path.lineTo(x, y);
    }
    
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    
    canvas.drawPath(path, paint);
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

3. 使用第三方库

在 pubspec.yaml 中添加：

dependencies:
  wave_progress_indicator: ^1.0.0

使用示例：

WaveProgressIndicator(
  size: 200,
  backgroundColor: Colors.grey,
  valueColor: Colors.blue,
  value: 0.7,
)

关键要点：

  • 使用 AnimationController 控制动画
  • CustomPaint 用于自定义绘制
  • 正弦函数创建波浪效果
  • 考虑性能优化，避免不必要的重绘

选择哪种方式取决于具体需求：简单进度条用内置组件，复杂波浪效果用自定义绘制或第三方库。

回到顶部