شارك المقالة

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

شاهد أيضًا
مقالات ذات صلة
ماهو افضل موقع صنع تطبيقات اندرويد مجانا وكيف الربح منها ؟

اذا كنت تريد إنشاء التطبيقات أندرويد مجانا دون الحاجة الى برنامج ابتكار تطبيقات الاندرويد فهذا…

كود بلغة الجافا يقوم بحساب مساحة الدائرة | java code that calculates the area of a circle

  كود بلغة الجافا يقوم بحساب مساحة الدائرةواحده من الاكواد التي يبحث عليها الكثير من…

إنشاء مشروع بإستخدام Retrofit و MvvM و Hilt و coroutines في Kotlin Compose

إنشاء مشروع بإستخدام Retrofit و MvvM و Hilt و coroutines في Kotlin Composeفي هذه المقالة،…

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

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