شارك المقالة

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


شاهد أيضًا
مقالات ذات صلة
طريقة اضافة قران MediaPlayer الى الاندرويد ستوديو – How to add media player in android studio

في هذا المقال المميز في دروس الاندرويد ستوديو سوف نتعرف على طريقة اضافة الصوتيات وخاصة…

كيفية عرض التصميم المناسب لكل نظام تشغيل باستخدام Flutter بدون مشاكل

كيفية عرض التصميم المناسب لكل نظام تشغيل باستخدام Flutter بدون مشاكل كما نعلم ان كل…

كيف تجعل صورك في Flutter تشبه صور Instagram أثناء التحميل ؟

عمل تمويه للصور عند عرضها من الانترنت وعند اكتمال التحميل تظهر الصورة الاصليه مثل تطبيق…

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

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