كود تكبير الصور في Flutter عند النقر عليها مرتين مع امكانية تتبع الموقع المراد تكبيره

كود تكبير الصور في Flutter عند النقر عليها مرتين مع امكانية تتبع الموقع المراد تكبيره

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

كان Flutter موجودًا منذ أن أطلقته Google لأول مرة في عام 2015 ، لكن الإثارة المحيطة به أصبحت مؤخرًا أكبر. إنها أداة مشتركة بين الأنظمة الأساسية تستخدم بنية حديثة ومتفاعلة لإنشاء تطبيقات Android و iOS من قاعدة رمز واحدة. يتم استخدام Dart ، وهي لغة برمجة أساسية موجهة للكائنات ، لإنشاء تطبيقات Flutter. يتكون التصميم لدى Flutter من مجموعة قطع واشكال . تكون واجهة المستخدم الكاملة من العديد من عناصر واجهة المستخدم ، كل منها يحدد عنصرًا هيكليًا (مثل زر أو قائمة) ، وعنصر أسلوبي (مثل الخط أو نظام الألوان) ، وجانب التخطيط (مثل الحشو) ، و هكذا. لا تستخدم Flutter أدوات OEM ، وبدلاً من ذلك تقدم أدواتها الخاصة الجاهزة للاستخدام والتي يبدو أنها أصلية في Android (تصميم المواد) أو تطبيقات iOS.

تكبير جزء معين من الصور عند الضغط عليه في فلاتر

الكود التالي تم ادارجه به صورة من على الانترنت وتم استخدام الanimation في الصورة وبعدها تستخدمنا العنصر GestureDetector لكي نحصل على امكانية الضغط مرتين على الصورة وبعدها اخبرناه انه عندما يتم الضغط مرتين قم بتكبير الصورة بمقدار 5 اضعاف وبعدها اجعل مساحة الموقع المحدد هيا المساحه الاجماليه للصورة وعند الضغط مرى اخرى يتم الغاء التكبير وبعدها قمنا بوضع الصورة بداخله وتحديدا داخل ال InteractiveViewer لكي نتمكن من استخدام خاصية ال transformationController وهيا المسؤوله عن تغيير الشكل اثناء عملية التكبير وهذه هيا فكرة الكود بسهوله .

main.dart

class GeeCoders extends StatefulWidget {

  @override
  State<GeeCoders> createState() => _GeeCodersState();
}

class _GeeCodersState extends State<GeeCoders> with SingleTickerProviderStateMixin{
  String img = 'https://images.unsplash.com/photo-1641974747505-b8e77b521aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80';
  late TransformationController controller;
  late AnimationController animationController;
  TapDownDetails? tapDownDetails;
  Animation<Matrix4>? animation;

  void initState() {
    super.initState();
    controller = TransformationController();
    // this => with SingleTickerProviderStateMixin =  Class name .
    animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 300),)
    ..addListener(() {
      controller.value = animation!.value;
    });
  }

  void dispose() {
    controller.dispose();
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(24),
        child: buildImage(),
      ),
    );
  }

  Widget buildImage()=> GestureDetector(
    onDoubleTapDown: (details)=> tapDownDetails = details,
    onDoubleTap: (){
      // zoom in double click position .
      final position = tapDownDetails!.localPosition;

      // amount of zoom
      final double scale = 5;

      // position after DoubleClick
      final x = -position.dx * (scale -1);
      final y = -position.dy * (scale -1);

      // zoom + position
      final zoomed = Matrix4.identity()
        ..translate(x,y)
        ..scale(scale);

      // if zoom or not zoom ?
      final end = controller.value.isIdentity() ? zoomed : Matrix4.identity();

      // animation
      animation = Matrix4Tween(
        begin: controller.value,
        end: end,
      ).animate(
        CurveTween(curve: Curves.easeOut).animate(animationController),
      );

      animationController.forward(from: 0);

    },
    child: InteractiveViewer(
      transformationController: controller,
      // zoom limited ?
      clipBehavior: Clip.none,
      panEnabled: false,
      scaleEnabled: false,
      child: AspectRatio(
        // optionality .
          aspectRatio: 9/16,
          child: Image.network('$img' , fit: BoxFit.cover,),
      ),
    ),
  );
}

لمزيد من المقالات

• شرح كيفية الحصول على البيانات الاخبار من الapi بإستخدام DIO في Flutter
• شرح إنشاء تطبيق إخباري بأسخدام Apis في flutter بسهوله
• تصميم تطبيق BMI Calcoluter في Flutter مع الكود المصدر
• إضافة الDarkmode الى تطبيقك وحفظ التغيير في shared preferences بإستخدام Flutter
• كيفية حذف بيانات من Database بإستخدام Flutter عن طريق السحب
• نقل البيانات بين مختلف صفحات التطبيق في Flutter 

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