شارك المقالة

كيفية زيادة عدد العناصر مع انميشن في فلاتر | 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("+"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}


شاهد أيضًا
مقالات ذات صلة
شرح كيفية تغيير اسم الصف عند طباعة الجدول في SQL

  السلام عليكم ورحمة الله وبركاتة مرحبا بكم في اكواد sql حيث سوف نتعلم في…

Flutter Document Scanner: وداعاً للأوراق! مسح ضوئي للمستندات بسهولة على هاتفك!

Flutter Document Scanner: وداعاً للأوراق! مسح ضوئي للمستندات بسهولة على هاتفك!اكتشف الحل السحري لمسح ضوئي…

كيفية عمل shift لاول رقم في list بلغة برولوغ | shift in prolog program

  لغة prolog هي لغة more complex وليس الجيمع يستطيع تعلمها بسهوله بل تحتاج منك…

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

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