اضافة عداد للعناصر 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,
),
),
),
]
)
);
}
}
فيديو الشرح
وهذا هو الكود بإختصار يمكنك استخدامه اذا كنت تعمل على متجر اليكتروني لان هذا مميز جدا ويوفر عليك الكثير من الوقت .
