كيفية اضافة borader حول الصورة عند الضغط عليها واظهار زر عندما يتم تحديد صورة Flutter بالعربي

كيفية اضافة borader حول الصورة عند الضغط عليها واظهار زر عندما يتم تحديد صورة Flutter بالعربي

من الاضافات الجميلة التي توجد في كثير من المشاريع وهيا مكتبة carousel_slider حيث انها تسمح لنا بعرض مجموعه من الصور في شكل slider ويمكننا التغيير بينهم وايضا تسمح لنا بامكانية التغيير بشكل اوتوماتيكي مع امكانية عمل zoom على العنصر الذي يكون في المنتصف وتخصيص حجم معين للصورة وكثير من الاضافات التي تقدمها لنا هذه المكتبة وفي مقالة اليوم سوف نشرح معكم كيف تقوم بعمل امكانية لتحديد العنصر مع اظهار اطار حول الصورة المختاره واظهار زر في حالة اختيار اي عنصر كما هو موضح بالصورة الموجوده في المقاله .

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

android sdk manager تحميل flutter developers applications create app android android studio mac

نتيجة لذلك ، هناك حاجة كبيرة لمطوري تطبيقات الأجهزة المحمولة الذين يمكنهم إنشاء تطبيقات جميلة وبديهية. وفقًا لمكتب إحصاءات العمل الأمريكي ، من المتوقع أن تزداد الحاجة إلى مطورين مؤهلين بنسبة 21٪ بين عامي 2018 و 2028 نتيجة لتطوير تطبيقات الأجهزة المحمولة. التطبيقات الأصلية والتطبيقات المختلطة هما الفئتان الرئيسيتان لتطبيقات الأجهزة المحمولة.

add package:

  carousel_slider: ^4.1.1

How to select image and show borader in Flutter project

بكل بساطة لدينا list of string تعبر عن الصور الموجوده لدينا وعندنا bool لمعرفة هل قام المستخدم باختيار اي صورة ام لا وايضا لدينا map لوضع البيانات المختاره بداخلها واذا قام المستخدم بالنقر على نفس العنصر وهنا تكون الداتا متشابهه فسوف يلغي الاختيار وهذا يدل على انه يرغب بذلك , قمنا باستخدام animated container حتى نضع انميشن في التطبيق عند اختيار العنصر او الغاء الاختيار حتى يصبح الشكل النهائي يحتوي على انميشن ويعطي تجربة استخدام رائعه للمستخدم .

ui.dart

class _MyMobileBodyState extends State<MyMobileBody> {
  static const List<String> posts = [
    'assets/img/background/image-5.png',
    'assets/img/background/image-4.jpg',
    'assets/img/background/image-3.jpg',
    'assets/img/map/avatar-1.png',
    'assets/img/map/avatar-3.png',
    'assets/img/map/avatar-5.png',
  ];

  dynamic _selectProduct = {};
  bool isSelectd = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.8,
            width: MediaQuery.of(context).size.width,
            child: CarouselSlider(
              options: CarouselOptions(
                height: 450,
                aspectRatio: 16 / 9,
                viewportFraction: 0.7,
                enlargeCenterPage: true,
              ),
              items: posts.map((item) {
                return Builder(
                  builder: (BuildContext context) {
                    return GestureDetector(
                      onTap: () {
                        setState(() {
                          if (_selectProduct == item) {
                            _selectProduct = {};
                            isSelectd = false;
                          } else {
                            _selectProduct = item;
                            isSelectd = true;
                            print(_selectProduct);
                          }
                        });
                      },
                      child: AnimatedContainer(
                        width: double.infinity,
                        duration: const Duration(milliseconds: 250),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(20),
                          border: _selectProduct == item
                              ? Border.all(
                                  color: Colors.blue.shade500,
                                  width: 3,
                                )
                              : null,
                          boxShadow: _selectProduct == item
                              ? [
                                  BoxShadow(
                                    color: Colors.blue.shade100,
                                    blurRadius: 30,
                                    offset: const Offset(0, 10),
                                  ),
                                ]
                              : [
                                  BoxShadow(
                                    color: Colors.grey.withOpacity(0.2),
                                    blurRadius: 20,
                                    offset: const Offset(0, 5),
                                  ),
                                ],
                        ),
                        child: SingleChildScrollView(
                          child: Column(
                            children: [
                              Hero(
                                transitionOnUserGestures: true,
                                tag: item.split('/').last,
                                child: Container(
                                  height: 320,
                                  clipBehavior: Clip.hardEdge,
                                  margin: const EdgeInsets.all(10),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  child: Image.asset(item, fit: BoxFit.cover),
                                ),
                              ),
                              const SizedBox(height: 10),
                              const Text(
                                'Test Page',
                                style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              const SizedBox(height: 10),
                              Text(
                                'welcome to geecoders.com',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.grey.shade600),
                              ),
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                );
              }).toList(),
            ),
          ),
            AnimatedContainer(
              duration: const Duration(milliseconds: 250),
              height: isSelectd ? 40 : 0,
              width: isSelectd ? 300 : 0,
              child: MaterialButton(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                color: Colors.blue.shade500,
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) =>
                    ProductViewPage(img: _selectProduct,hero: _selectProduct.split('/').last),
                  ));
                },
                child: const Text(
                  'Add to cart',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}