Home > Back-end >  Flutter Google Maps and CachedNetworkImage not working on Android emulator
Flutter Google Maps and CachedNetworkImage not working on Android emulator

Time:10-26

I'm struggling with strange problem with Google Maps and CachedNetworkImage on Android emulator. App works perfect on iPhone simulator, but on Android emulator CachedNetworkImage and Google Maps aren't working properly.

  • CachedNetworkImage displays CircularProgressIndicator but not loading an image. Also size of images are less than 40k.
  • Widget with GoogleMaps displays empty screen and print error to console.

I did activated Google Maps API for Android and for iOS. I did added API for Android to AndroidManifest.xml, and API for iOS into AppDelegate.swift. My biling account is active (I also created different API KEY but with the same result):

<meta-data android:name="com.google.android.geo.API_KEY" android:value="MY_API_KEY_FOR_ANDROID"/>

I did added permission for internet:

  <uses-permission android:name="android.permission.INTERNET" />

I've run couple of times

flutter clean 

flutter run 

I reinstalled app from emulator.

  • MinSdkVersion is set to 24.
  • compileSdkVersion is set to 30.

This is my MapWidget:

import 'dart:async';
import 'package:duty/models/announcement.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class OrderMapWidget extends StatelessWidget {
  final Announcement announcement;

  OrderMapWidget({required this.announcement});

  @override
  Widget build(BuildContext context) {
    final CameraPosition position = CameraPosition(
      target: LatLng(announcement.address.geoloc.latitude,
          announcement.address.geoloc.longitude),
      zoom: 9,
    );
    Set<Circle> _circle = Set.from([
      Circle(
        circleId:
            CircleId(('circle_id_${DateTime.now().millisecondsSinceEpoch}')),
        center: LatLng(announcement.address.geoloc.latitude,
            announcement.address.geoloc.longitude),
        radius: 8000,
        strokeWidth: 2,
        strokeColor: Theme.of(context).accentColor,
        fillColor: Theme.of(context).accentColor.withAlpha(20),
      )
    ]);
    return Container(
      height: 120,
      child: GoogleMap(
        mapType: MapType.normal,
        onMapCreated: (GoogleMapController controller) {},
        compassEnabled: false,
        myLocationEnabled: false,
        myLocationButtonEnabled: false,
        initialCameraPosition: position,
        onCameraMove: null,
        circles: _circle,
        zoomGesturesEnabled: false,
        tiltGesturesEnabled: false,
        scrollGesturesEnabled: false,
        rotateGesturesEnabled: false,
      ),
    );
  }
}

And my CachedNetworkImage:

ClipOval(
         child: CachedNetworkImage(
          imageUrl: userData.profileImage,
          progressIndicatorBuilder: (context, url, downloadProgress) =>
              CircularProgressIndicator(value: downloadProgress.progress),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
    ),

My pubspec.yaml:

version: 1.0.0 1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0
  cloud_firestore: ^2.5.3
  firebase_auth: ^3.1.3
  firebase_core: ^1.7.0
  flutter_google_places: ^0.3.0
  google_maps_flutter: ^2.0.9
  uuid: ^3.0.4
  geocoding: ^2.0.1
  cupertino_icons: ^1.0.2
  cached_network_image: ^3.1.0

I tried using different emulators. The error when using GoogleMaps on Android is as bellow:

E/flutter (15357): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: PlatformException(error, java.lang.IllegalStateException: 
Trying to create a platform view of unregistered type: plugins.flutter.io/google_maps
E/flutter (15357):  at io.flutter.plugin.platform.PlatformViewsController$1.createVirtualDisplayForPlatformView(PlatformViewsController.java:192)

Very similar issue

I've tried everything but for now nothing helped. Once again everything works perfect on iOS but not on Android. Thanks for any kind of help! Matt

CodePudding user response:

Ok, I look up through all of my dependencies and it seems that flutter_facebook_auth was casing the problem. Strange but after removing flutter_facebook_auth everything seems to be working. Google Maps and CachedNetworkImage are now working as they should. I had the newest version of flutter_facebook_auth, I tried to downgrade but it still was causing the problem. Only removing this dependencie resolve my problem. Strange...

  • Related