اضافة عدسة مكبره للصور في تطبيقات Flutter || Add a magnifying glass to images in Flutter applications

اضافة عدسة مكبره للصور في تطبيقات Flutter || Add a magnifying glass to images in Flutter applications

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

شرح كيفية تكبير جزء معين من الصورة في تطبيقات فلاتر

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

RawMagnifier widget ?

يمكن استخدام RawMagnifier في العديد من سيناريوهات الاستخدام المختلفة، مثل:

عرض نص صغير بوضوح أكبر.

تكبير صورة أو رسومات لرؤية التفاصيل الدقيقة.

تكبير جزء من شاشة التطبيق لمزيد من التركيز.

يمكن أن يكون RawMagnifier مفيدًا أيضًا للأشخاص الذين يعانون من إعاقات بصرية. يمكن أن يساعدهم على رؤية المحتوى بوضوح أكبر.

لإنشاء RawMagnifier في Flutter، يمكنك استخدام Widget التالي:

RawMagnifier(
  child: Text("Hello, world!"),
  magnification: 2.0,
)

في هذا المثال، يتم تكبير النص الأصلي بمقدار 2.0. يمكنك أيضًا استخدام معلمة focalPoint لتحديد نقطة التركيز للتكبير.

مثال اخر حول انشاء صورة ووضع عدسة مكبره عليها

ui.dart

Scaffold(
          backgroundColor: Theme.of(context).scaffoldBackgroundColor,
          body: Center(
            child: Stack(
              children: [
                GestureDetector(
                  onPanUpdate: (update){
                    setState(() {
                      offset = update.localPosition;
                    });
                  },
                  child: Image.network(img),
                ),
                Positioned(
                    left: offset.dx,
                    top: offset.dy,
                    child: RawMagnifier(
                      magnificationScale: 2,
                      focalPointOffset: Offset.zero,
                      size: Size(100,100),
                      decoration: MagnifierDecoration(
                        shape: CircleBorder(
                          side: BorderSide(color: Colors.red,width: 2)
                        ),
                      ),
                    ))
              ],
            ),
          ),
        );