DEV Community: António Valente

How to Customize Your Cluster Markers on Flutter Google Maps

António Valente — Wed, 08 Jul 2020 16:19:18 +0000

If you’ve been following our blog and read our recent posts about Flutter and the Google Maps package, I’m sure you now know how to cluster markers, but how do you customize or make them dynamic?

This is a follow-up article of How to Cluster Markers on Google Maps using Flutter so I will not get into the details about clustering the markers. Instead, I will tell you how I was able to customize the cluster markers by adding a dynamic child counter that updates depending on the zoom level.

This was missing in the previous article, and since some of you asked for it here I am! 😎 Without further wait, let’s get into it! 💪

So, how do you customize the markers? Unfortunately, the official Google Maps package doesn’t support clusters, and the markers aren’t event widgets so we must resort to drawing on the canvas… wait! Isn’t that scary? 😱

Flutter makes it easy so it’s nothing to be afraid of. The following code contains the solution I found:

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

Future<BitmapDescriptor> getClusterMarker(
  int clusterSize,
  Color clusterColor,
  Color textColor,
  int width,
) async {
  final PictureRecorder pictureRecorder = PictureRecorder();
  final Canvas canvas = Canvas(pictureRecorder);
  final Paint paint = Paint()..color = clusterColor;
  final TextPainter textPainter = TextPainter(
    textDirection: TextDirection.ltr,
  );

  final double radius = width / 2;

  canvas.drawCircle(
    Offset(radius, radius),
    radius,
    paint,
  );

  textPainter.text = TextSpan(
    text: clusterSize.toString(),
    style: TextStyle(
      fontSize: radius - 5,
      fontWeight: FontWeight.bold,
      color: textColor,
    ),
  );

  textPainter.layout();
  textPainter.paint(
    canvas,
    Offset(
      radius - textPainter.width / 2,
      radius - textPainter.height / 2,
    ),
  );

  final image = await pictureRecorder.endRecording().toImage(
    radius.toInt() * 2,
    radius.toInt() * 2,
  );

  final data = await image.toByteData(format: ImageByteFormat.png);

  return BitmapDescriptor.fromBytes(data.buffer.asUint8List());
}

First, we set up the PictureRecorder, Canvas, Paint, and TextPainter with proper colors and text direction, then we simply get the radius and draw a circle on the canvas.

Next is the text, we want it to be the cluster size counter text and we add some style to it. In the end, we simply end the picture recorder and convert it to an image and then to a bitmap descriptor needed for the marker icon.

And that’s it! Pretty simple isn’t it? To end this article, I will tell you what more has changed from the latest How to Cluster Markers on Google Maps using Flutter post and we’re finished 🙌.

We just need to update the way we’re generating the markers like this:

return Future.wait(clusterManager.clusters(
  [-180, -85, 180, 85], currentZoom.toInt(),
).map((mapMarker) async {
  if (mapMarker.isCluster) {
    mapMarker.icon = await _getClusterMarker(
      mapMarker.pointsSize,
      Colors.blue,
      Colors.white,
      80,
    );
  }

  return mapMarker.toMarker();
}).toList());

We’re checking if the map marker is a cluster and if it is we generate the cluster icon with the updated point size to have the correct counter text inside the circle marker. We also tell it which colors we want to use and the width. Just keep in mind that this is now an async operation.

There are a few more small changes that you can see on our flutter google maps clusters repo. Go on and check it out!

Thank you for reading!

Thank you so much for reading, it means a lot to us! Also don’t forget to follow Coletiv on Twitter and LinkedIn as we keep posting more and more interesting articles on multiple technologies.

In case you don’t know, Coletiv is a software development studio from Porto specialized in Elixir, Web, and App (iOS & Android) development. But we do all kinds of stuff. We take care of UX/UI design, software development, and even security for you.

So, let’s craft something together?

How to Cluster Markers on Flutter using Google Maps

António Valente — Wed, 08 Jul 2020 16:14:50 +0000

If you’re using Google Maps to display markers on your Flutter app, I’m sure that you will eventually need to cluster those markers. You don’t want users to zoom out and see hundreds of markers spamming the map right?

Well, as I’m sure you know by now, that feature isn’t supported yet by the official Google Maps package. Check this issue to know more.

Rest assured though because I’ve got a solution that might work for you.

Fluster Package Comes to the Rescue

In your search for solutions, you probably bumped into the Fluster package. This package uses a Dart port of supercluster and works really well, but how do you use it on your Flutter project?

The readme is very brief, doesn’t explain much and the example isn’t even a Flutter project. This makes the package very easy to overlook unless you find this demo project by the package author, but even with this code, you will struggle to understand how to use it in your project. At least I did. Again, there are no proper readme instructions and the code can be a bit overwhelming at first.

In this article, I will break down the code and explain it step by step so you can understand and implement a similar solution in your project.

Implementing Fluster

1. Extending the Clusterable class

Fluster can only handle markers that conform to the Clusterable abstract class so this is a good place to start.

import 'package:fluster/fluster.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:meta/meta.dart';

class MapMarker extends Clusterable {
   final String id;
   final LatLng position;
   final BitmapDescriptor icon;

MapMarker({
   @required this.id,
   @required this.position,
   @required this.icon,
   isCluster = false,
   clusterId,
   pointsSize,
   childMarkerId,
   }) : super(
         markerId: id,
         latitude: position.latitude,
         longitude: position.longitude,
         isCluster: isCluster,
         clusterId: clusterId,
         pointsSize: pointsSize,
         childMarkerId: childMarkerId,
      );

Marker toMarker() => Marker(
         markerId: MarkerId(id),
         position: LatLng(
         position.latitude,
         position.longitude,
         ),
         icon: icon,
      );
}

Here is my implementation. You can see it on Github here. Notice how I’ve added the toMarker() method. This method will come in handy later on, to convert our list of MapMarkers to a list of Markers so our GoogleMap widget doesn’t complain.

Note that you can add more arguments to the class depending on your use case. Like an onTap() callback or a Marker InfoWindow.

2. Create the List of Markers to be Displayed

import 'package:flutter_google_maps_clusters/helpers/map_marker.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

final List<MapMarker> markers = [];

final List<LatLng> markerLocations = [
   LatLng(41.147125, -8.611249),
   LatLng(41.145599, -8.610691),
   ...
];

for (LatLng markerLocation in markerLocations) {
   markers.add(
      MapMarker(
         id: markerLocations.indexOf(markerLocation).toString(),
         position: markerLocation,
         icon: markerImage,
      ),
   );
}

You should have a list of locations where you want to place the markers. Create a MapMarker for every location.

3. Init Fluster

import 'package:fluster/fluster.dart';
import 'package:flutter_google_maps_clusters/helpers/map_marker.dart';

final Fluster<MapMarker> fluster = Fluster<MapMarker>(
   minZoom: minZoom, // The min zoom at clusters will show
   maxZoom: maxZoom, // The max zoom at clusters will show
   radius: 150, // Cluster radius in pixels
   extent: 2048, // Tile extent. Radius is calculated with it.
   nodeSize: 64, // Size of the KD-tree leaf node.
   points: markers, // The list of markers created before
   createCluster: ( // Create cluster marker
      BaseCluster cluster,
      double lng,
      double lat,
   ) => MapMarker(
         id: cluster.id.toString(),
         position: LatLng(lat, lng),
         icon: clusterImage,
         isCluster: cluster.isCluster,
         clusterId: cluster.id,
         pointsSize: cluster.pointsSize,
         childMarkerId: cluster.childMarkerId,
   ),
);

Here, you’re creating your Fluster instance. It will handle all the logic of updating the markers and clusters you need to show in your map for a given zoom level. For more information about the parameters used, check out the Fluster source code or the supercluster options.

4. Get Cluster Markers

import 'package:fluster/fluster.dart';
import 'package:flutter_google_maps_clusters/helpers/map_marker.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

final List<Marker> googleMarkers = fluster
      .clusters([-180, -85, 180, 85], currentZoom)
      .map((cluster) => cluster.toMarker())
      .toList()

Now you’ll see that handy toMarker() method coming to action. We’re telling fluster to get the cluster markers within the giving bounding box of [westLng, southLat, eastLng, northLat] for the current zoom level and converting them to Google Maps Markers. Now we can use that list to show the markers on the map.

5. Show the Map with Markers

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

@override
Widget build(BuildContext context) {
   return Scaffold(
      body: GoogleMap(
         initialCameraPosition: CameraPosition(
            target: LatLng(41.143029, -8.611274),
            zoom: currentZoom,
         ),
         markers: googleMarkers.toSet(),
         onMapCreated: (controller) {
            // You can init Fluster here
         },
         onCameraMove: (position) {
            // Update the markers for the updated position.zoom
         ),
      ),
   );
}

In the build(context) method of your page, you should create your Google Map widget and pass the markers created by fluster and voilà! You will have clusters showing on your map. 👏 👏 👏

You can use the onMapCreated() to know when the map is ready to show your markers. Also, make sure to update the markers with the updated zoom level on the onCameraMove() by calling setState() or using your favorite state management system, so Fluster knows if it needs to cluster or uncluster some markers.

Now you have all the code needed to implement marker clustering on your GoogleMap widget. Hope you‘ve found this article useful and understood how everything works.

Be sure to check the example project at the Coletiv Github account to see the rest of the code needed to implement clusters on Google Maps.

Don’t forget to add your Google Maps API key to the project if you want to see it working. Just add it here and here.

Also, if you want to try some alternatives to handle marker clusters check out Flutter Map and Flutter Map Marker Cluster packages.

Thank you for reading! 😊

Thank you so much for reading, it means a lot to us! Also, don’t forget to follow Coletiv on Twitter and LinkedIn as we keep posting more and more interesting articles on multiple technologies.

In case you don’t know, Coletiv is a software development studio from Porto specialized in Elixir, iOS, and Android app development. But we do all kinds of stuff. We take care of UX/UI design, web development, and even security for you.

So, let’s craft something together?

Use Network Images as Marker Icons on Flutter Google Maps

António Valente — Wed, 08 Jul 2020 16:05:34 +0000

Currently, if you need to use Google Maps on your Flutter app and want to use custom icons for your map markers, you’re limited in terms of options. You can either use an asset or a file as a marker icon and that’s it.

Recently, while working on a project here at Coletiv, I needed to fetch the images of the markers from a REST API and display them on a Google Maps map.

Since everything is a widget in Flutter, you might think it’s possible to use any widget as a marker icon, and then hook an Image widget with the marker and be done with it. But, unfortunately, that’s not possible yet. You can track that feature request in this Github issue.

If you’re willing to let Google Maps go, I recommend that you try the Flutter Map package which allows you to use any widget as a marker icon. The problem is that this package only works with Map Tile API’s which are lacking in terms of performance comparing to the native Google Maps library.

Now, let’s check how I’ve implemented this feature.

1 - First implementation using HTTP

import 'package:http/http.dart' as http;

final http.Response response = await http.get(imageUrl);
BitmapDescriptor.fromBytes(response.bodyBytes);

Simple enough isn’t it? We have 2 problems with this implementation though. First, you’re performing a network request for every marker every time which can delay the loading. Second, the image is not resized, so we can have markers with different sizes, which is weird.

Let’s solve these problems.

2 - Caching the marker images with Flutter Cache Manager

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

final File markerImageFile = await DefaultCacheManager().getSingleFile(imageUrl);
final Uint8List markerImageBytes = await markerImageFile.readAsBytes();

BitmapDescriptor.fromBytes(markerImageBytes);

The DefaultCacheManager from the Flutter Cache Manager package will handle all the caching logic for you. First, it checks the cache to see if the file was already downloaded or not, and if it was, it will check if the file is old (older than 30 days by default). If the file is recent it will be returned right away but if it needs to be refreshed or doesn’t exist, it will be downloaded and stored in the cache and then returned. You can customize this behavior by implementing the BaseCacheManager or by doing the caching mechanism yourself.

With this, you’ll see that the markers load much faster.

3 - Resizing the marker images

import 'dart:typed_data';
import 'dart:ui';

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

final int targetWidth = 60;
final File markerImageFile = await DefaultCacheManager().getSingleFile(imageUrl);
final Uint8List markerImageBytes = await markerImageFile.readAsBytes();

final Codec markerImageCodec = await instantiateImageCodec(
   imageBytes,
   targetWidth: targetWidth,
);

final FrameInfo frameInfo = await imageCodec.getNextFrame();
final ByteData byteData = await frameInfo.image.toByteData(
   format: ImageByteFormat.png,
);

final Uint8List resizedMarkerImageBytes = byteData.buffer.asUint8List();

BitmapDescriptor.fromBytes(resizedMarkerImageBytes);

With this, you’re resizing the marker image to the targetWidth and converting it to PNG format which is required by the marker icon BitmapDescriptor.fromBytes method.

And that's it! Now you will have a properly resized marker with a network image icon that won’t take forever to load, showing in your Google Map widget. 👏 👏 👏

There is an example project at the Coletiv Github account that uses all this code and also implements Clusters on Google Maps, which is yet another unsupported feature that will be discussed in another article.

Be sure to check it out in the flutter google maps clusters repo, to see all the code with proper syntax highlighting and take a sneak peek at how I've implemented Clusters.

Note: You need to get your Google Maps API Key and add it here and here.

Thank you for reading! 😊

I hope this guide helps you and your team to save some time with the deployments and remember to continuously check Fastlane advancements and updates. More and more tools will come that may expedite this enduring process of deployment!

Thank you so much for reading, it means a lot to us! Also, don’t forget to follow Coletiv on Twitter and LinkedIn as we keep posting more and more interesting articles on multiple technologies.

So, let’s craft something together?

Android GitHub Actions Setup

António Valente — Wed, 08 Jul 2020 13:02:27 +0000

Here at Coletiv, when starting a new project, we always aim to deliver it following the highest standards of quality. Like so, continuous integration (CI) and continuous deployment (CD) are some of the first things we focus on before starting to code. That way we are sure that our code is always checked, tested, and meets our quality standards before being deployed.

For Android specifically, we always used services like TravisCI or CircleCI for this task, but since we are heavy users of GitHub we couldn’t wait to experiment with GitHub Actions and check if it would be a better option for our projects. And guess what? It’s amazing!

Here is how we set up GitHub Actions on our Android projects.

Workflow Overview

We always have two types of workflows, one for testing and code checking and one for deploying. The first always runs on pull requests and the last only runs when the code is merged to master or develop.

Please note that we usually create multiple build variants for different environments. In this example, we’re running the commands for the staging build variant. You should change all the commands to your correct variant name or remove the staging word from them if you don’t need to use variants.

Testing Workflow

The purpose of this workflow is to run some lint checks and to run our tests. Here is the list of jobs that it performs:

Decode our Google services config file (if you’re not using Google services or Firebase you can remove this job).
Run Kotlin lint check.
Run Android lint check.
Run unit tests.
Run instrumented tests.

name: Testing Workflow

# Step 1: Choose the branch or branches you want to run this workflow
on:
  pull_request:
    branches:
      - develop

jobs:
  testing:
    name: Lint Check and Testing

    runs-on: ubuntu-latest

    steps:
      - name: Clone Repo
        uses: actions/checkout@v1

      - name: Set up JDK 1.8
        uses: actions/setup-java@v1
        with:
          java-version: 1.8

      # Step 2: Decode Google services configuration file
      - name: Decode google-services.json
        env:
          FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }}
        run: echo $FIREBASE_CONFIG > app/google-services.json

      # Step 3: Check the code with ktlint, you can remove this job if you don't use ktlint
      - name: Run Kotlin Linter
        run: ./gradlew ktlintStagingDebugCheck

      # Step 3: Check the code with Android linter
      - name: Run Android Linter
        run: ./gradlew lintStagingDebug

      # Step 4: Yun your unit tests
      - name: Run Unit Tests
        run: ./gradlew testStagingDebugUnitTest

      # Step 4: Assemble debug apk to send to firebase test lab
      - name: Assemble Debug APK
        run: ./gradlew assembleStagingDebug

      # Step 4: Assemble debug test apk to send to firebase test lab
      - name: Assemble Debug Test APK
        run: ./gradlew assembleStagingDebugAndroidTest

      # Step 4: Run instrumented tests on firebase test lab
      - name: Run tests on Firebase Test Lab
        uses: asadmansr/Firebase-Test-Lab-Action@v1.0
        with:
          arg-spec: '.github/test-lab-config-staging.yml:android-pixel-4'
        env:
          SERVICE_ACCOUNT: ${{ secrets.SERVICE_ACCOUNT }}

Let’s go step by step to explain everything.

Tell GitHub when do you want to run this workflow. In this case, I’m saying that I want it to run on pull requests to the develop branch. You can tell it to run on any branch you like, just replace/add the name.
Skipping a bit further, since we’re using the Google services, you need to go to the settings to add a new secret. Just create a new secret paste the content of your Google services JSON file there and choose a name. Our name for this secret is FIREBASE_CONFIG.
We want to perform some checks to the code. For this, we’re using Ktlint and the built-in Android linter. To configure Ktlint check this and this. If you don’t need to run Kotlin checks delete the Kotlin linter job.
Finally, we are creating jobs to run our tests. Running unit tests is pretty straightforward but running instrumented tests is really a pain because you need an emulator or real device to run them. You can go two ways here. Create a job to create and start an emulator on the CI machine (check this) or run them on Firebase Test Lab. We’ve chosen the last one and we’re using the awesome Firebase Test Lab Action. For more info on how to do this follow the guide.

android-pixel-4:
  type: instrumentation
  # Specify the path to the debug and test apks generated early
  app: app/build/outputs/apk/staging/debug/app-staging-debug.apk
  test: app/build/outputs/apk/androidTest/staging/debug/app-staging-debug-androidTest.apk
  device:
    - model: flame
      version: 29
      locale: 'en'
      orientation: portrait

Deploy Workflow

Assuming that you have the develop and master branches protected and that you ran the testing workflow before doing a merge to these main branches, this workflow is very simple. It only needs to publish our app.

name: Deploy Workflow

# Step 1: Choose the branch or branches you want to run this workflow
on:
  push:
    branches:
      - develop

jobs:
  deploy:
    name: Deploy

    runs-on: ubuntu-latest

    steps:
      - name: Clone Repo
        uses: actions/checkout@v1

      - name: Set up JDK 1.8
        uses: actions/setup-java@v1
        with:
          java-version: 1.8

      # Step 2: Decode Google services configuration file
      - name: Decode google-services.json
        env:
          FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }}
        run: echo $FIREBASE_CONFIG > app/google-services.json

      # Step 3: Decode the service account json key, needed on the next job
      - name: Decode service account key
        env:
          SERVICE_ACCOUNT: ${{ secrets.SERVICE_ACCOUNT }}
        run: echo $SERVICE_ACCOUNT > app/service-account-key.json

      # Step 4: Publish the APK to the Play Store using the release keystore
      - name: Publish APK
        env:
          RELEASE_KEYSTORE_PASSWORD: ${{ secrests.RELEASE_KEYSTORE_PASSWORD }}
          RELEASE_KEY_ALIAS: ${{ secrests.RELEASE_KEY_ALIAS }}
          RELEASE_KEY_PASSWORD: ${{ secrests.RELEASE_KEY_PASSWORD }}
        run: ./gradlew publishStagingRelease

Let’s again go step by step to explain everything.

Tell GitHub when to run this workflow. I’m saying that I want it to run on pushes to the develop branch.
Like on the testing workflow we need the Google services JSON file so we’re decoding it before running any Gradle task.
We also need to create a Google service account to be able to have publish access in the next job. Check this for more info. After creating the account you can download the JSON key and add it to the secrets like you’ve done before with the Google services JSON.
Lastly, we are publishing the app using the Gradle Play Publisher plugin. You’ll need to add some configurations into your Android project to have this task available. For that please follow the instructions here. You also must add the release Keystore passwords and alias to the GitHub secrets as those are needed on this job and are sensitive data. Note that we usually have the Keystore file on our private repos, if you don’t want to have it there or you’re working on a public repo, you can also add it to your secrets and then decode it when running the workflow.

Final Thoughts

I really recommend that you give GitHub Actions a try in your next Android project. It’s easy to create and manage workflows as the syntax is very simple and understandable, the integration with other GitHub services is nice and having your CI builds in the same place of your repository is really a plus. Also, the community is amazing and the number of actions in the GitHub marketplace grows by the day.

Thank you for reading!

Thank you so much for reading, it means a lot to us! Also don’t forget to follow Coletiv on Twitter and LinkedIn as we keep posting more and more interesting articles on multiple technologies.

In case you don’t know, Coletiv is a software development studio from Porto specialised in Elixir, Web, and App (iOS & Android) development. But we do all kinds of stuff. We take care of UX/UI design, software development, and even security for you.

So, let’s craft something together?