القائمة الرئيسية

الصفحات

اضافة عداد للعناصر badges الموجوده في السلة Flutter

 

اضافة عداد للعناصر badges الموجوده في السلة Flutter

اضافة عداد للعناصر badges الموجوده في السلة Flutter

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


افترض أنك قمت بإصدار تطبيق Android يكتسب شعبية يومًا بعد يوم. يتزايد الطلب على إصدار إصدار iOS. كما يطلب بعض المستخدمين إصدارًا خفيفًا عبر الإنترنت من البرنامج. الوقت متاح بالنسبة لك ، لكنك تفتقر إلى الأموال اللازمة لتوظيف مطور والوقت لتعلم لغة جديدة تمامًا ، ناهيك عن إطلاق تطبيق جاهز للإنتاج.


هذا هو المكان الذي يبدأ فيه مفهوم تطوير البرامج عبر الأنظمة الأساسية. يتيح لك تطوير التطبيقات عبر الأنظمة الأساسية إنشاء تطبيق يعمل على العديد من الأنظمة الأساسية باستخدام نفس قاعدة التعليمات البرمجية. يمكن بسهولة نقل الكود المستخدم لإنشاء تطبيق Android إلى iOS أو الويب أو برنامج سطح مكتب. وهذا يلغي أيضًا الحاجة إلى الاحتفاظ بقاعدة بيانات منفصلة. أليس هذا رائعا؟


تعد Flutter و React Native و PhoneGap و Ionic و Xamarin بعضًا من أدوات تطوير التطبيقات عبر الأنظمة الأساسية الموجودة حاليًا في السوق.


اضفة مكتبة badges 

قم بإضافة الاكواد التالية في الملف المخصص


dependencies:
  badges: ^2.0.2
  


شرح إستخدام المكتبة في فلاتر


شرح إستخدام المكتبة في فلاتر


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



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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[800],
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // button add & sub .
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                onPressed: () {
                  setState(() {
                    _counter--;
                  });
                },
                icon: Icon(Icons.remove, size: 32),
              ),
              SizedBox(
                width: 30,
              ),
              IconButton(
                onPressed: () {
                  setState(() {
                    _counter++;
                  });
                },
                icon: Icon(
                  Icons.add,
                  size: 32,
                ),
              ),
            ],
          ),
          SizedBox(height: 30,),
          // Badge
          Center(
            child: Badge(
              elevation: 10,
              // color .
              badgeColor: Colors.orangeAccent,
              // animated off / on
              toAnimate: true,
              // position
              position: BadgePosition.topStart(),
              // style
              shape: BadgeShape.circle,
              // padding
              padding: const EdgeInsets.all(5.0),
              badgeContent: Text('$_counter'),
              child: Icon(
                Icons.shopping_bag_outlined,
                size: 62,
              ),
            ),
          ),
        ]

      )
    );
  }
}


وهذا هو الكود بإختصار يمكنك استخدامه اذا كنت تعمل على متجر اليكتروني لان هذا مميز جدا ويوفر عليك الكثير من الوقت .


تعليقات

التنقل السريع