شارك المقالة

شرح كيفية تغيير ايقونة الموقع في الخريطة داخل 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)
      );

شاهد أيضًا
مقالات ذات صلة
طريقة عمل تاثير حركي داخل cardview و recyclerview

  في هذا المقال سوف نتعرف على طريقة اضافة تاثير حركي سواء للكارد فيو او…

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

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

شرح كيفية الانتقال الى بيانات عنصر معين في الrecyclerview مع animation للانتقال في الاندرويد ستوديو

شرح كيفية الانتقال الى بيانات عنصر معين في الrecyclerview مع animation للانتقال في الاندرويد ستوديومن…

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

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