How to get google maps to work in flutter?

Issue

I have followed the steps on the package’s dev page: https://pub.dev/packages/google_maps_flutter
but when I run it after inputing my api key all I get is a blank screen as seen here:

Screenshot

AndroidManifest.xml looks like this:

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="foodiesapp"
        android:icon="@mipmap/ic_launcher">   
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- This keeps the window background of the activity showing
                 until Flutter renders its first frame. It can be removed if
                 there is no splash screen (such as the default splash screen
                 defined in @style/LaunchTheme). -->
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="AIzaSyB........"/>
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

And the main page is the exact code from the packages dev page example: https://pub.dev/packages/google_maps_flutter

Does anyone have an idea of what the issue could be?

Solution

Move the API_KEY meta-data to be above the main activity.

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="foodiesapp"
        android:icon="@mipmap/ic_launcher">
        <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="AIzaSyB........"/> <!--here-->
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"

Answered By – ByteMe

Answer Checked By – Cary Denson (FlutterFixes Admin)