شارك المقالة

كيفية زيادة عدد العناصر مع انميشن في فلاتر | 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

عرض جميع الدول والمناطق المخصصه لكل دولة في Flutter في هذا المقال سوف نعرض معاكم…

شرح تمرير البيانات في Flutter اثناء الانتقال بين الصفحات

  شرح تمرير البيانات في Flutter اثناء الانتقال بين الصفحاتعملية تمرير البيانات لابد ان تحدث…

شرح كيفية عمل dynamic link في Flutter باستخدام firebase

شرح كيفية عمل dynamic link في Flutter باستخدام firebase معظم التطبيقات تستخدم dynamic link وهذا…

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

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