اضافة تاثير التمويج كالمقطع الصوتي بداخل تطبيقات Flutter

اضافة تاثير التمويج كالمقطع الصوتي بداخل تطبيقات Flutter

في هذا المقال سوف نقوم معكم بعمل تاثير كالذي نشاهده في المقاطع الصوتيه او حتى يمكنك تنفيذه لكي تحصل على شكل جميل ورائع لتطبيقك وبدون اي مكتبات خارجية كل شيئ من خلال ال widget والانميشن التي يقدمها لنا Flutter وكل شيئ موجود بالاكواد التي بالاسفل من اجل مساعدتكم في تحسين مظهر التطبيق يمكنك استخدام هذا التصميم في صفحة انتظار او حتى في صفحة لعرض تشغيل المقطع الصوتي .

android sdk manager تحميل flutter developers applications create app android android studio mac

Add sound effect in your flutter project

يمكنك استخدام الانميشن وخصوصا WaveWidget التي قمنا بعملها بالاسفل واستخدام نسبة الwave واللون وسوف يعمل وهنا قمنا بعمل اكثر من شكل حتى تستطيع تنفيذ بشكل جميل وبالوان مختلفه كما هو موضح .

ui.dart

class MyMobileBody extends StatefulWidget {
  const MyMobileBody({Key? key}) : super(key: key);

  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body: Center(
          child: SizedBox(
            width: 300,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                WaveWidget(index: 20, color: Colors.amber,),
                WaveWidget(index: 18, color: Colors.redAccent,),
                WaveWidget(index: 16, color: Colors.black,),
                WaveWidget(index: 14, color: Colors.blue,),
                WaveWidget(index: 12, color: Colors.redAccent,),
                WaveWidget(index: 10, color: Colors.amber,),
                WaveWidget(index: 8, color: Colors.redAccent,),
                WaveWidget(index: 6, color: Colors.black,),
                WaveWidget(index: 4, color: Colors.blue,),
                WaveWidget(index: 2, color: Colors.redAccent,),
                WaveWidget(index: 2, color: Colors.amber,),
                WaveWidget(index: 4, color: Colors.redAccent,),
                WaveWidget(index: 6, color: Colors.black,),
                WaveWidget(index: 8, color: Colors.redAccent,),
                WaveWidget(index: 10, color: Colors.amber,),
                WaveWidget(index: 12, color: Colors.redAccent,),
                WaveWidget(index: 14, color: Colors.black,),
                WaveWidget(index: 16, color: Colors.blue,),
                WaveWidget(index: 18, color: Colors.redAccent,),
                WaveWidget(index: 20, color: Colors.redAccent,),
              ],
            ),
          )
      ),
    );
  }
}

class WaveWidget extends StatefulWidget {
  final int index;
  final Color color;

  const WaveWidget({Key? key, required this.index, required this.color})
      : super(key: key);

  @override
  State<WaveWidget> createState() => _WaveWidgetState();
}

class _WaveWidgetState extends State<WaveWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController animatedContainer;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    animatedContainer =
        AnimationController(vsync: this, duration: const Duration(
          milliseconds: 800,
        ));
    _scaleAnimation =
        Tween<double>(begin: 2.0, end: 50.0).
        animate(
            CurvedAnimation(parent: animatedContainer, curve: Curves.easeInOut));
    super.initState();
    Future.delayed(Duration(milliseconds: widget.index * 80), () {
      animatedContainer.forward();
    });

    animatedContainer.addListener(() {
      if (animatedContainer.isCompleted) {
        animatedContainer.reverse();
      } else if (animatedContainer.isDismissed) {
        animatedContainer.forward();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(2.0),
      child: AnimatedBuilder(
        animation: _scaleAnimation,
        builder: (context, child) {
        return Container(
          height: _scaleAnimation.value,
          width: 8.0,
          decoration: BoxDecoration(
              color: widget.color,
              borderRadius: BorderRadius.circular(5.0)
          ),
        );
      },),
    );
  }
}