إنشاء card متحرك في flutter بسهوله | Easily create an animated card in Flutter

إنشاء card متحرك في flutter بسهوله | Easily create an animated card in Flutter

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

تعد كيفية تحقيق الأداء الأصلي للتطبيق وكيفية تسهيل تصميم الميزات المتنوعة للأجهزة والأنظمة الأساسية قدر الإمكان على المطورين من الصعوبات الرئيسية التي تواجه أطر العمل عبر الأنظمة الأساسية للجوّال. عند القيام بذلك ، ضع في اعتبارك أن تجربة المستخدم يجب أن تكون متسقة مع دمج العناصر المميزة الخاصة بكل نظام أساسي (Android و iOS).

على الرغم من أن الأطر المشتركة بين الأنظمة الأساسية يمكنها عادةً معالجة المشكلات الخاصة بالمنصة ، إلا أن هناك بعض الوظائف التي لا يمكن إنجازها إلا من خلال التعليمات البرمجية الخاصة بالنظام الأساسي المكتوبة خصيصًا. السؤال الرئيسي هو كيف يمكن لهذه الأطر إنشاء اتصال بين النظام الأساسي والتطبيق المعينين. 

Add packages :

  card_swiper: ^2.0.4

  simple_animations: ^4.0.1

  supercharged: ^2.1.1

Create fade Animation in Flutter

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

fade.dart

import 'package:flutter/material.dart';
import 'package:simple_animations/multi_tween/multi_tween.dart';
import 'package:simple_animations/stateless_animation/play_animation.dart';
import 'package:supercharged/supercharged.dart';

enum AniProps { opacity, translateY }

class FadeAnimation extends StatelessWidget {
  final double delay;
  final Widget child;

  FadeAnimation({required this.delay, required  this.child});

  @override
  Widget build(BuildContext context) {
    final tween = MultiTween<AniProps>()
      ..add(AniProps.opacity, 0.0.tweenTo(1.0), 500.milliseconds)
      ..add(AniProps.translateY, (-30.0).tweenTo(0.0), 500.milliseconds,
          Curves.easeOut);


    return PlayAnimation<MultiTweenValues<AniProps>>(
      delay: Duration(milliseconds: (500 * delay).round()),
      duration: tween.duration,
      tween: tween,
      child: child,
      builder: (context, child, value) => Opacity(
        opacity: value.get(AniProps.opacity),
        child: Transform.translate(
            offset: Offset(0, value.get(AniProps.translateY)), child: child),
      ),
    );
  }
}

create swipe card animation flutter

في هذا الجزء قمنا بعمل التصميم الخاص بالعنصر من اللون والاسم والايقونة والقيمة وغيرها من العناصر وقمنا بعمله بداخل List حتى نقوم بتكرار العمليه لاكثر من مره بدون اي مشاكل في الكود الخاص بنا وبعدها قمنا بعمل التاثير عليها وتاثير السحب الذي قمنا به في الجزء الذي يوجد بالاعلى حتى نصل في النهايه الى التصميم الذي نرغب به بدون اي مشاكل .

ui.dart

class Cards{
  late List<Color> color;
  late String name;
  late String icon;
  late String  money;
  late String  bank;


  Cards({
    required this.name,
    required this.color,
    required this.money,
    required this.icon,
    required this.bank

  });

}

List<Cards> cardinfo = [
  Cards(name: "Alireza", color: const [Color(0xFFE96443),Color(0xFF904E95)],money: "5634.0",icon: "assets/img/icon/category_1.png", bank: 'assets/img/icon/category_1.png'),
  Cards(name: "Flutter", color: const [Color(0xFF00D2FF),Color(0xFF928DAB)],money: "2644.0", icon:"assets/img/icon/category_2.png", bank: 'assets/img/icon/category_2.png'),
  Cards(name: "Amirziy", color: const [Color(0xFFFFC371),Color(0xFFFF5F6D)],money: "7684.0", icon: "assets/img/icon/category_3.png", bank: 'assets/img/icon/category_3.png'),
];

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

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {

  @override
  Widget build(BuildContext context) {
    var we = MediaQuery.of(context).size.width;
    var he  = MediaQuery.of(context).size.height;
    return Scaffold(
      backgroundColor: Colors.black,
      body: FadeAnimation(
        delay: 1.5,
        child: Swiper(
          itemCount: cardinfo.length,
          layout: SwiperLayout.TINDER,
          itemWidth:400,
          itemHeight:  340 ,
          itemBuilder: (c,i){
            return Stack(
              children: <Widget>[
                Column(
                    children: <Widget>[
                      SizedBox(height: he * 0.015),
                      Card(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25)
                        ),
                        child: Container(
                          decoration: BoxDecoration(
                              gradient: LinearGradient(
                                  colors: cardinfo[i].color,
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomCenter
                              ),
                              boxShadow: [
                                BoxShadow(
                                  color:Colors.grey.withOpacity(0.5),
                                  blurRadius: 7,
                                  offset: const Offset(0,3),
                                )
                              ],
                              borderRadius: BorderRadius.circular(25)
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(25.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Text(cardinfo[i].name,style:const TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 25)),
                                    SizedBox(
                                      width:we * 0.5 ,
                                    ),
                                    Image.asset(cardinfo[i].icon,
                                      width: we * 0.07,
                                      height: he * 0.07,
                                      color: Colors.white,
                                    ),
                                  ],
                                ),
                                SizedBox(
                                  height: he * 0.03,
                                ),
                                Container(
                                  margin: const EdgeInsets.only(right: 100),
                                  child: Row(
                                    mainAxisAlignment:MainAxisAlignment.center,
                                    children:  <Widget>[
                                      const Text("••••",style: TextStyle(color: Colors.white,fontSize: 20,fontWeight: FontWeight.bold)),
                                      SizedBox(width: we * 0.04),
                                      const Text("••••",style: TextStyle(color: Colors.white,fontSize: 20,fontWeight: FontWeight.bold)),
                                      SizedBox(width: we * 0.04),
                                      const Text("••••",style: TextStyle(color: Colors.white,fontSize: 20,fontWeight: FontWeight.bold)),
                                      SizedBox(width: we * 0.04),
                                      const Text("7450",style: TextStyle(color: Colors.white,fontSize: 20,fontWeight: FontWeight.bold)),
                                    ],
                                  ),
                                ),
                                SizedBox(
                                  height: he * 0.05,
                                ),
                                Container(
                                    margin: const EdgeInsets.only(right: 200),
                                    child: const Text("Available Balance",style: TextStyle(color: Colors.white),)),
                                SizedBox(
                                    height: he * 0.01
                                ),
                                Row(
                                    children: <Widget>[
                                      Text('\$ ',style: TextStyle(color: Colors.white,fontSize: 22),),
                                      Text(cardinfo[i].money,style: const TextStyle(color: Colors.white,fontSize: 26,fontWeight: FontWeight.bold),),
                                      SizedBox(
                                          width: we * 0.45
                                      ),
                                      Image.asset(cardinfo[i].bank,
                                          width: we * 0.09,
                                          height: we * 0.09,
                                          color: Colors.white
                                      )
                                    ]
                                ),
                              ],
                            ),
                          ),
                        ),
                      )
                    ]
                )
              ],
            );
          },
        ),
      ),
    );
  }

}