كيفية زيادة عدد العناصر مع انميشن في فلاتر | 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 للخط كما ترغب بدون مشاكل .

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("+"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}