How to Integrate Google Maps in Flutter with Bloc State Management

Google Maps is one of the most popular mapping and navigation services in the world. Flutter, on the other hand, is a rapidly growing mobile app development framework that has taken the world by storm. Integrating Google Maps with Flutter is a great way to provide an excellent location-based user experience.

In this blog, we’ll go over how to integrate Google Maps with a Flutter app and add basic functionality like adding markers using bloc state management. The Bloc state management is a design pattern for Flutter that helps manage and organize application states.

Note: Advertisement Starts!

Advertisement Ends!

Step 1: Set up the project

To get started, create a new Flutter project and add the Google Maps dependency to the pubspec.yaml file.

dependencies: google_maps_flutter: ^2.0.3

Step 2: Obtain a Google Maps API key

To use Google Maps in your application, you need an API key. You can obtain a key from the Google Cloud Console. Once you have a key, add it to your project by following the instructions provided by Google.

Step 3: Create a new Map

To create a new map, add a new file called map_view.dart. In this file, we’ll create a new stateless widget called MapView. In the widget’s build method, we’ll add the GoogleMap widget, which is provided by the Google Maps Flutter package.

import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapView extends StatelessWidget {

@override

Widget build(BuildContext context) {

return GoogleMap(

initialCameraPosition: CameraPosition(

target: LatLng(37.42796133580664, -122.085749655962),

zoom: 14.4746,

),

);

}

}

Step 4: Add Markers to the Map

To add markers to the map, we need to create a new class called MarkerData that will hold the necessary information about each marker. In the example below, the MarkerData class holds the latitude, longitude, and title of each marker.

class MarkerData {

final double latitude;

final double longitude;

final String title;

MarkerData({

required this.latitude,

required this.longitude,

required this.title,

}

);

}

Next, we’ll modify the MapView widget to include a list of MarkerData objects that we can use to display the markers on the map.

class MapView extends StatelessWidget {

final List<MarkerData> markers;

const MapView({

Key? key,

required this.markers,

}) : super(key: key);

@override

Widget build(BuildContext context) {

return GoogleMap(

initialCameraPosition: CameraPosition(

target: LatLng(37.42796133580664, -122.085749655962),

zoom: 14.4746,

),

markers: markers .map(

(marker) => Marker(

markerId: MarkerId(marker.title),

position: LatLng(

marker.latitude, marker.longitude),

infoWindow: InfoWindow(

title: marker.title),

),

) .toSet(), );

}

}

The code above takes in a list of MarkerData objects and maps them to a list of Marker widgets. Each Marker widget takes in the latitude, longitude, and title of each MarkerData object.

Step 5: Implementing Bloc state management

In order to add state management to the application, we’ll use the bloc package. We’ll create a new class called MapBloc that will hold the state of the map and provide methods to update the state.

class MapBloc {

final _markers = <MarkerData>[];

Stream<List<MarkerData>> get markersStream => _markersController.stream; final _markersController = StreamController<List<MarkerData>>();

void addMarker(MarkerData marker) {

_markers.add(marker); _markersController.add(_markers);

}

void dispose() {

_markersController.close();

}

}

In the code above, we create a private list of MarkerData objects and a stream controller to manage changes to the list. We also provide methods to add markers and dispose of the stream controller.

Next, we’ll create a new stateful widget called MapPage that will use the MapView widget and the MapBloc to manage the state of the map.

In the code above, we create a new stateful widget called MapPage. We create a new instance of the MapBloc in the widget’s state and pass the stream of MarkerData objects to the MapView widget. We also add a floating action button that, when pressed, adds a new marker to the map using the addMarker method provided by the MapBloc.

Conclusion

Integrating Google Maps with Flutter can seem daunting at first, but it’s actually a straightforward process. In this blog, we went over how to integrate Google Maps with Flutter, add markers to the map, and implement bloc state management. With these techniques, you can build robust location-based applications that provide an excellent user experience.

 Follow me on social Media: 

1. Follow me on Facebook: 

    https://www.facebook.com/profile.php?id=100089858752142

2. Follow me on LinkedIn:

    https://www.linkedin.com/in/mohammad-azeem-b37431161/

3. Follow me on Twitter:

    https://twitter.com/Mohamme49054008

4. medium profile: 

    https://medium.com/@azeemkalwar51

5. vocal media profile: 

    https://vocal.media/authors/mohammed-azeem

Thank you!