شارك المقالة

كيفية زيادة عدد العناصر مع انميشن في فلاتر | How to increase the number of items with an animation in Flutter


كيفية زيادة عدد العناصر مع انميشن في flutter

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


add odometer

  odometer: ^3.0.0


How to create counter with animation in Flutter

بعد تثبيت المكتبة بشكل صحيح يمكنك استخدام AnimatedSlideOdometerNumber حتى تتمكن من عمل التاثير وتحديد المده والقيمة وعند تغير القيمة سوف تشاهد حدوث الانميشن كما هو موضح بالصورة ايضا يمكنك تعديل خط معين وتخصيص style للخط كما ترغب بدون مشاكل .


How to create counter with animation in Flutter

ui.dart


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

  @override
  State<SecPage> createState() => _SecPageState();
}

class _SecPageState extends State<SecPage> {
  int _counter = 10000;

  @override
  void initState() {
    super.initState();
  }

  void _incrementCounter() {
    setState(() {
      _counter += 10000;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter -= 10000;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        title: const Text("Odometer Package Example", style: TextStyle(color: Colors.black),),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedSlideOdometerNumber(
              odometerNumber: OdometerNumber(_counter),
              duration: const Duration(milliseconds: 1000),
              letterWidth: 35,
              numberTextStyle: const TextStyle(
                  fontSize: 35,
                  fontWeight: FontWeight.bold
              ),
            ),
            const SizedBox(height: 20,),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _decrementCounter,
                  child: const Text("-"),
                ),
                const SizedBox(width: 20,),
                ElevatedButton(
                  onPressed:_incrementCounter,
                  child: const Text("+"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}


شاهد أيضًا
مقالات ذات صلة
شرح كيفية ارسال اشعار للهاتف باستخدام flutter | How to Send Notification with Flutter

شرح كيفية ارسال اشعار للهاتف باستخدام flutter الاشعارات امر حتمي لابد ان يتوفر في تطبيقك…

تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه | flutter spinkit

 تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعهفي هذا المقال نشارك معكم واحد…

تحسين تجربة المستخدم في تطبيقات الجوال باستخدام مكتبة Skeletonizer في Flutter

خطوات سهلة لتطبيق التحميل الهيكلي في تطبيقات الأندرويد باستخدام Skeletonizerتعد مكتبة Skeletonizer أداة متقدمة لمطوري…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع