عمل counter متغير عند اضافة عنصر او تقليل عنصر باستخدام Flutter

عمل counter متغير عند اضافة عنصر او تقليل عنصر باستخدام Flutter

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

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

How to create counter animation without animation in Flutter

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

ui.dart

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

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

class _ChatPageState extends State<ChatPage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Alignment> _animation;
  int  number = 1;
  var _dragAlignment = Alignment.center;

  final _spring = const SpringDescription(
    // set up for animation
    mass: 20, // speed
    stiffness: 150, // duration
    damping: 1.5, // distance
  );

  double _normalizeVelocity(Offset velocity, Size size) {
    final normalizedVelocity = Offset(
      velocity.dx / size.width,
      velocity.dy / size.height,
    );
    return -normalizedVelocity.distance;
  }

  void _runAnimation(Offset velocity, Size size) {
    _animation = _controller.drive(
      AlignmentTween(
        begin: _dragAlignment,
        end: Alignment.center,
      ),
    );

    final simulation =
    SpringSimulation(_spring, 0.0, 1.0, _normalizeVelocity(velocity, size));

    _controller.animateWith(simulation);
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController.unbounded(vsync: this)
      ..addListener(() => setState(() => _dragAlignment = _animation.value));
  }

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

  void click(String add) {
    if (add == '+') {
      if (number < 8) {
        setState(() {
          number++;
        });
      }
    } else {
      if (number >= 1) {
        setState(() {
          number--;
        });
      } else {
        return;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.black12.withOpacity(0.2),
      body: Align(
        alignment: _dragAlignment,
        child: SizedBox(
          width: 250,
          height: 300,
          child: Stack(
            children: [
              Align(
                  alignment: Alignment.center,
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 300),
                    curve: Curves.fastLinearToSlowEaseIn,
                    height: 150,
                    width: 150,
                    decoration: BoxDecoration(
                      color: const Color(0xff8639FB),
                      shape: BoxShape.circle,
                      boxShadow: [
                        BoxShadow(
                          color: const Color(0xff8639FB).withOpacity(0.7),
                          blurRadius: 30,
                        ),
                      ],
                    ),
                    child:  Center(
                      child: FittedBox(
                        child: Text(
                          '$number'.toString(),
                          style: const TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.w700,
                            fontSize: 85,
                          ),
                        ),
                      ),
                    ),
                  )),
              Container(
                margin: const EdgeInsets.only(left: 95) ,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    IconButton(
                        onPressed: () {
                          _controller.stop(canceled: true);
                          click('+');
                          setState(() {
                            _dragAlignment += const Alignment(
                                0.0 , 0.1
                            );
                            _runAnimation( Offset(size.width * 90  , size.height * 90)   , size);
                          });

                        },
                        icon: const Icon(Icons.expand_less_outlined,size: 45,color: Colors.white,)
                    ),
                    const SizedBox(
                      height: 200,
                    ),
                    IconButton(
                        onPressed: (){
                          _controller.stop(canceled: true);
                          click('-');
                          setState(() {
                            _dragAlignment -= const Alignment(
                                0.004 ,  0.1
                            );
                          });
                          _runAnimation( Offset(size.width * 90  , size.height * 90) , size);
                        },
                        icon: const Icon(Icons.expand_more_outlined,size: 45,color: Colors.white,)
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}