شارك المقالة

انشاء مربع احترافي للتخفيضات في تطبيق متجرك بإستخدام Flutter

 


انشاء مربع احترافي للتخفيضات في تطبيق متجرك بإستخدام Flutter

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


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


الكود المستخدم


انشاء مربع احترافي للتخفيضات في تطبيق متجرك بإستخدام Flutter


هذا الكود بسيط جدا جدا ويعتبر الافكار تم شرحها مسبقا ومن خلالها قمنا بتكوين كود اليوم .


@override
Widget build(BuildContext context) {
    
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Container(
width: 300,
height: 400,
clipBehavior: Clip.antiAliasWithSaveLayer,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: new DecorationImage(
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(Colors.red.withOpacity(0.8), BlendMode.srcATop),
image: new NetworkImage(
'https://www.stockvault.net/data/2021/01/08/282271/preview16.jpg',
),
),
),
),
Column(
children: [
Container(
margin: EdgeInsets.only(top: 155 , bottom: 20),
child: CircleAvatar(
radius: 45,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/3b/7b/68/3b7b68b6d1db8efbeb88d55b561e1b43.jpg'),
                  ),
                ),
Container(
child: Text('Geecoders.com' , style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white , fontSize: 20),),
),
SizedBox(height: 10,),
Container(
child: Text('15%' , style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white , fontSize: 50),),
),
SizedBox(height: 5,),
Container(
child: Text('OFF' , style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white , fontSize: 20),),
),
],
),
Container(
height: double.infinity,
width: double.infinity,
margin: EdgeInsetsDirectional.only(top: 160),
child: Row(
children: [
SizedBox(width: 35, height: 180,),
CircleAvatar(
backgroundColor: Colors.white,
),
SizedBox(width: 265,),
CircleAvatar(
backgroundColor: Colors.white,
),
],
),
),
Container(
margin: EdgeInsetsDirectional.only(top: 410),
child: DottedBorder(
color: Colors.white,
dashPattern: [16,16],
padding: EdgeInsets.all(0),
child: Container(),
),
),
Container(
margin: EdgeInsetsDirectional.only(top: 280),
width: 180,
height: 50,
child: MaterialButton(onPressed: (){},
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Text('Ok' , style: TextStyle(color: Color.fromRGBO(225, 66, 78,1) , fontWeight: FontWeight.bold , fontSize: 18),),
),
),
]
),
),
);
}


فيديو الشرح


لمزيد من الاكواد والشروحات في تقنية فلاتر او في تطوير تبطيقات الجوال يمكنكم مشاهدة باقي المقالات على الموقع .

شاهد أيضًا
مقالات ذات صلة
شرح إنشاء فاتورة Flutter PDF Arabic Invoice مخصصة مع دعم و RTL خطوة بخطوة
شرح إنشاء فاتورة Flutter PDF Arabic Invoice مخصصة مع دعم و RTL خطوة بخطوة

شرح إنشاء فاتورة Flutter PDF Arabic Invoiceمخصصة مع دعم و RTL خطوة بخطوة بالتفصيل تُعد…

عرض تفاصيل الطلب الذي قام بة المستخدم في برنامج الاندرويد ستوديو #7 | firebase with android studio

  في هذا المقال سوف نتعرف بأذن الله تعالى على كيفية عمل أون كليك onClick …

حل مشكلة push master to origin/master was

حل مشكلة push master to origin/master wasفي البداية سبب ظهور المشكلة هو مشكلة “push master…

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

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