شارك المقالة

شرح كيفية تغيير ايقونة الموقع في الخريطة داخل Flutter باكثر من طريقة


شرح كيفية تغيير ايقونة الموقع في الخريطة داخل Flutter باكثر من طريقة

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


هناك العديد من الأطر المتاحة لتبدأ عند إنشاء تطبيق متعدد المنصات. قد تفكر في Flutter أو Ionic على التوالي. Ionic هو إطار عمل يتمتع بشعبية كبيرة بالفعل ويدمج تقنية الويب في تطوير التطبيقات. يمكنه دمج React و Angular و Vue ويحتوي على عدد كبير من مكتبات الطرف الثالث. Flutter ، لاعب جديد نسبيًا ، لديه قاعدة جماهيرية تتوسع بسرعة. إنها تستخدم طريقة فريدة للتطوير عبر الأنظمة الأساسية على أساس محرك رسومي ثنائي الأبعاد. الهدف الأساسي لإطار العمل هذا هو تمكين تطوير سريع لواجهة المستخدم يمكن مقارنته بالأصل من حيث الأداء والمظهر. بدلا من استخدام العادية فقط


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


How to change icon marker in Flutter

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


How to change icon marker in Flutter

ui.dart


// ---------- you can use
Uint8List? customMarker;

Future<Uint8List> changeIconLocation() async {
    ByteData byteData = await DefaultAssetBundle.of(context).load("assets/img/icon/category_2.png");
    customMarker = byteData.buffer.asUint8List();
    return byteData.buffer.asUint8List();
  }

Marker(
    icon: BitmapDescriptor.fromBytes(customMarker!,size: const Size(100,100)),
    );

// ----------- Or
  BitmapDescriptor sourceIcon = BitmapDescriptor.defaultMarker;

  void setCustomMarker() {
      BitmapDescriptor.fromAssetImage(
        ImageConfiguration.empty,
        'assets/img/map/marker-5.png',
      ).then((onValue) {
        destinationIcon = onValue;
      });
    }

	Marker(
    	icon: sourceIcon
      );

// ----------- Or


  Future<BitmapDescriptor> _getAssetIcon(BuildContext context, String icon) async {
    final Completer<BitmapDescriptor> bitmapIcon = Completer<BitmapDescriptor>();
    final ImageConfiguration config = createLocalImageConfiguration(context, size: Size(5, 5));

    AssetImage(icon)
        .resolve(config)
        .addListener(ImageStreamListener((ImageInfo image, bool sync) async {
      final ByteData? bytes = await image.image.toByteData(format: ImageByteFormat.png);
      final BitmapDescriptor bitmap = BitmapDescriptor.fromBytes(bytes!.buffer.asUint8List());
      bitmapIcon.complete(bitmap);
    })
    );

    return await bitmapIcon.future;
  }


		Marker(
        markerId: MarkerId(contact['name']),
        position: contact['position'],
        icon: await _getAssetIcon(context, 'assets/img/map/avatar-1.png').then((value) => value)
      );

شاهد أيضًا
مقالات ذات صلة
كيفية تخصيص تصميم مختلف لعرض bottomNavigationBar في Flutter

كيفية تخصيص تصميم مختلف لعرض bottomNavigationBar في Flutter في هذا المقال المميز والذي يساعدكم في…

كود جافا لمعرفة هل الشخص محصن من فيرس كرونا-19 ام لا | java code to Find out if a person has corona virus or not

  كود جافا لمعرفة هل الشخص محصن من فيرس كرونا-19 ام لابعد انتشار فيروس كرونا…

كيف تكتب اول برنامج لك في لغة الجافا بكل سهوله | java tutorial | تعلم لغة الجافا بالعربي

ماذا استفيد من تعلم البرمجه ؟ يمكنك الاستفاده منها كمصدر رزق لك مثلا يوجد صيدليه…

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

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