flutter 录音振幅动画

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class CanvasCustomText extends StatefulWidget {
  const CanvasCustomText({super.key});

  @override
  State<CanvasCustomText> createState() => _CanvasCustomTextState();
}
class _CanvasCustomTextState extends State<CanvasCustomText> with TickerProviderStateMixin{
Timer? _timer;
List _sounds=[];
@override
void initState() {
  // TODO: implement initState
  super.initState();

  if(_timer!=null){
    _timer?.cancel();
  }
  _timer=Timer.periodic(Duration(milliseconds: 400), (timer) {
    double w=MediaQuery.of(context).size.width;
    double num=w/8;
    Random _random = new Random(DateTime.now().microsecondsSinceEpoch);
    if(_sounds.length>num){
      _sounds.removeAt(0);
    }
    _sounds.add({
      'size': (_random.nextDouble()*10)*4
    });
    setState(() {
      
    });
  });

}
@override
void dispose() {
  // TODO: implement dispose
  super.dispose();
  _timer?.cancel();
}
@override
Widget build(BuildContext context) {
  var animSound=CustomPaint(
    painter: CustomSoundSizeAnim(soundList: _sounds),
  );
  return Scaffold(
         resizeToAvoidBottomInset: false,
         body:ListView(
            children: [
                Container(
                   height: 200,
                   margin: EdgeInsets.only(top: 40),
                   width: double.infinity,
                   decoration: BoxDecoration(
                      border: Border.all(color: Colors.black38)
                   ),
                   child:animSound
                )
            ],
         )

  );
}
class CustomSoundSizeAnim extends CustomPainter{
  List? soundList;
  CustomSoundSizeAnim(
  {
    this.soundList
  });
  Paint?  _paint;
  @override
  void paint(Canvas canvas, Size size) {
    _paint=Paint()..color=Colors.orange;
    // TODO: implement paint
    drawRect(canvas,size);
  }
  drawRect(Canvas canvas,Size size){
    double count=(size.width/8);
    soundList=[...soundList!.reversed];
    for(int i=0;i<count;i++){
      canvas.drawRRect(RRect.fromRectXY(Rect.fromCenter(center: Offset(i*8, 100), width:4, height:4), 8, 8), _paint!);
    }
    for(int i=0;i<soundList!.length;i++){
        canvas.drawRRect(RRect.fromRectXY(Rect.fromCenter(center: Offset(i*8, 100), width:4, height: soundList![i]['size']), 8, 8), _paint!);
    }
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }
}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter 加载中动画是指在数据加载或处理过程中为用户提供的视觉反馈。在 Flutter 中,我们可以使用多种方法来实现加载中动画。 一种常见的方式是使用 Flutter 自带的 CircularProgressIndicator 组件。这是一个圆形进度指示器,可以显示加载进度的百分比。我们可以通过设置 value 属性来控制进度的大小,通常可以将它与 FutureBuilder 或 StreamBuilder 结合使用来显示网络请求或异步操作的进度。此外,我们还可以通过设置颜色和线条粗细等属性来自定义 CircularProgressIndicator 的外观。 除了 CircularProgressIndicator,Flutter 还提供了许多其他的加载中动画,比如 LinearProgressIndicator、RefreshIndicator 等。LinearProgressIndicator 是一个线性进度指示器,适用于表示长时间操作的进度。RefreshIndicator 则是下拉刷新的效果,用户在列表或页面顶部下拉时,会出现一个圈圈的加载动画,表示正在刷新数据。 除了使用预置的加载中动画组件,我们还可以通过自定义动画来实现更丰富的加载中效果。Flutter 提供了强大的动画库和组件,如 AnimatedContainer、AnimationController 等,使得创建自定义加载中动画变得更加方便。 总之,Flutter 提供了各种加载中动画的选择,无论是使用预置组件还是自定义动画,都可以根据项目需求和个人喜好来实现加载中效果。这些加载中动画可以提升用户体验,让用户在等待数据加载时感到更舒适和愉悦。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值