How to Make Drag and Drop Google Map Place Picker in Flutter
Introduction
Flutter has emerged as one of the most popular mobile app development frameworks in recent years. One of its key features is the ease of integrating Google Maps into your app, thanks to the `googlemapsflutter` package. However, when it comes to selecting a specific location on the map, the in-built `Marker` widget may not be enough. That’s where a drag and drop Google Map place picker comes in handy. In this blog post, we’ll show you how to create a custom `PlacePicker` widget in Flutter.
Section 1: Setting Up the Project
Before we dive into the code, let’s set up a new Flutter project. Run the following command in your terminal:
“`bash
flutter create googlemapplace_picker
“`
Navigate into the project directory and open it in your favorite IDE.
Section 2: Installing the Required Packages
To work with Google Maps, we’ll need to add the `googlemapsflutter` package to our project. Run the following command:
“`bash
flutter pub add googlemapsflutter
“`
Additionally, we’ll need to add the `path` package for working with file paths. Run the following command:
“`bash
flutter pub add path
“`
Section 3: Creating the Place Picker Widget
Now, let’s create a custom `PlacePicker` widget that allows users to select a location on the map by dragging a marker. Create a new file called `place_picker.dart` and add the following code:
“`dart
import ‘package:flutter/material.dart’;
import ‘package:googlemapsflutter/googlemapsflutter.dart’;
import ‘package:path/path.dart’ as path;
class PlacePicker extends StatefulWidget {
@override
PlacePickerState createState() => PlacePickerState();
}
class _PlacePickerState extends State
late GoogleMapController _mapController;
late BitmapDescriptor _markerIcon;
late LatLng _selectedLocation;
@override
void initState() {
super.initState();
_selectedLocation = LatLng(37.7749, -122.4194);
}
@override
void dispose() {
_mapController.dispose();
super.dispose();
}
void _onMapCreated(GoogleMapController controller) {
setState(() {
_mapController = controller;
});
}
void _updateMarkerIcon(LatLng location) {
_selectedLocation = location;
setState(() {});
}
void _addMarker(LatLng location) {
_mapController.animateCamera(CameraUpdate.newLatLngZoom(location, 14));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Drag and Drop Google Map Place Picker’),
),
body: Stack(
children: [
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _selectedLocation,
zoom: 14,
),
markers: {
Marker(
markerId: MarkerId(‘selected_location’),
position: _selectedLocation,
icon: _markerIcon,
),
},
onTap: (location) => _updateMarkerIcon(location),
),
Positioned(
bottom: 50,
left: 20,
child: Text(
‘${path.join(selectedLocation.latitude.toString(), selectedLocation.longitude.toString())}’,
),
),
Positioned(
bottom: 20,
left: 20,
child: ElevatedButton(
onPressed: () => addMarker(selectedLocation),
child: Text(‘Select Location’),
),
),
],
),
);
}
}
“`
This code creates a basic `PlacePicker` widget that displays a Google Map with a marker at the selected location.
Section 4: Customizing the Marker Icon
To customize the marker icon, we’ll need to create a new image asset. Create a new file called `assets/marker.png` and add the following code:
“`tex
// assets/marker.png
// Replace this comment with your custom image
“`
Replace the comment with your custom image.
Section 5: Using the Place Picker Widget
To use the `PlacePicker` widget in your app, simply import the `place_picker.dart` file and create an instance of the widget:
“`dart
import ‘package:flutter/material.dart’;
import ‘place_picker.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: PlacePicker(),
);
}
}
“`
This code will create a basic app with a `PlacePicker` widget.
Conclusion
In this blog post, we showed you how to create a custom `PlacePicker` widget in Flutter that uses the `googlemapsflutter` package. We demonstrated how to set up the project, install the required packages, create the `PlacePicker` widget, customize the marker icon, and use the widget in your app.
FAQs
1. What is the `googlemapsflutter` package?
The `googlemapsflutter` package is a library for integrating Google Maps into your Flutter app.
2. How do I add the `googlemapsflutter` package to my project?
Run the following command:
“`bash
flutter pub add googlemapsflutter
“`
3. What is the `BitmapDescriptor` class?
The `BitmapDescriptor` class is a utility class for working with image assets.
4. How do I customize the marker icon?
Create a new image asset (e.g. `marker.png`) and replace the comment with your custom image.
5. Can I use the `PlacePicker` widget in a production app?
Yes, you can use the `PlacePicker` widget in a production app. However, be sure to check the Google Maps API terms and conditions and configure your API key accordingly.
Note: Make sure to replace the `marker.png` file with your custom image and configure your Google Maps API key in the `googlemapsflutter` package.
