I am doing an website using flutter and I want user when it's typing a location to get suggestion of locations from google locator , I added the key api that I allowed to have Places API , Maps JavaScript API, Geocoding API , I added in my index.html

    <meta name="google-api-key" content="GOOGLE_API_KEY">
<script src=";></script>

I also created an .env file

I added in main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final apiKey = const String.fromEnvironment('AIzaSyCHFokS34JRip9fWSYgK1Z65rDAaIE-Idk', defaultValue: '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(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Row(
        children: [
          Expanded(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headlineMedium,
                  ),
                ],
              ),
            ),
          ),
          Image.asset('assets/aivent.png'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: PlacesAutocompleteField(
        apiKey: "AIzaSyCHFokS34JRip9fWSYgK1Z65rDAaIE-Idk",
        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!;
        },
      ),
    );
  }
}

I created a textfield for searching location where I added the google api key

Widget _buildLocationField(BuildContext context) {
    // ...
    child: PlacesAutocompleteField(
      apiKey: apiKey,
      controller: _locationController,
      inputDecoration: InputDecoration(
        hintText: 'Enter location',
        // ...
      ),
      onChanged: (value) {
        print("Searching for location: $value");
      },
      onSelected: (Prediction prediction) {
        print("Selected place: ${prediction.description}");
        _locationController.text = prediction.description!;
      },
    ),
    // ...
  }