Google Places Autocomplete Fails to Display Suggestions in Flutter Web App

Below are some recommendations and troubleshooting steps you can follow to ensure your location suggestions are coming through on your Flutter web project:

---

1. Verify Your API Key Usage

• API Key in index.html:
  Make sure your index.html has the correct API key and that the Maps JavaScript API is loaded. For example:

  HTMLCopied
  <meta name="google-api-key" content="YOUR_GOOGLE_API_KEY">
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&libraries=places"></script>

  Note that appending “&libraries=places” ensures the Places library is loaded.

• Matching Keys:
  Confirm that the API key embedded in your index.html, your Flutter widget (e.g. in PlacesAutocompleteField), and your .env file are all the same and allowed to use the Places, Maps JavaScript, and Geocoding APIs.

---

2. Loading the API Key with Dotenv

You mentioned an .env file is created and you’re loading it with dotenv.load. Instead of using a compile‑time constant with String.fromEnvironment (which won’t pick up runtime values), use the dotenv package to get the key at runtime. For example:

DARTCopied
import 'package:flutter_dotenv/flutter_dotenv.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: "assets/.env");
  await Firebase.initializeApp(options: firebaseOptions);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Retrieve the API key from the .env file
    final String apiKey = dotenv.env['GOOGLE_API_KEY'] ?? 'default_api_key';

    return MaterialApp(
      title: 'Festino.ai',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,
        textTheme: TextTheme(
          headlineSmall: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          bodyLarge: TextStyle(fontSize: 16),
          titleLarge: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
        ),
      ),
      home: Homepage(apiKey: apiKey),
    );
  }
}

And then pass the key to your location search widget:

DARTCopied
class Homepage extends StatelessWidget {
  final String apiKey;
  const Homepage({super.key, required this.apiKey});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          LocationSearch(apiKey: apiKey),
          // ...other widgets
        ],
      ),
    );
  }
}

And in your LocationSearch widget:

DARTCopied
class LocationSearch extends StatelessWidget {
  final String apiKey;
  final TextEditingController _locationController = TextEditingController();

  const LocationSearch({super.key, required this.apiKey});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: PlacesAutocompleteField(
        apiKey: apiKey,
        controller: _locationController,
        inputDecoration: InputDecoration(
          hintText: 'Enter location',
          filled: true,
          fillColor: Colors.white,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(16),
            borderSide: BorderSide.none,
          ),
        ),
        onChanged: (value) {
          print("Searching for location: $value");
        },
        onSelected: (Prediction prediction) {
          print("Selected place: ${prediction.description}");
          _locationController.text = prediction.description!;
        },
      ),
    );
  }
}

---

3. Other Considerations

• Billing and API Restrictions:
  Ensure that your Google Cloud billing is active and that your API key is allowed to use the required services (Places API, Maps JavaScript API, and Geocoding API). Double-check any key restrictions (like allowed referrers for web).

• Session Tokens:
  For Places Autocomplete, Google recommends using session tokens to group autocomplete requests for billing purposes. Depending on the package you’re using for PlacesAutocompleteField, this may be handled automatically, or you might need to generate a new session token for every new search session.

• Network and Console Logs:
  Open your browser’s developer console (F12) to look for any error messages related to the API key, quota issues, or network requests. Errors here can help pinpoint if the key is being rejected or if required libraries are missing.

---

Following these steps should help you troubleshoot why you’re not getting suggestions. In summary, load the API key correctly using dotenv at runtime, verify the inclusion of the Places library in your index.html, and ensure your API key settings are correct on the Google Cloud Console.