Flutter Flow: Service Location Dashboard Template
Flutter

Flutter Flow: Service Location Dashboard Template

2024-03-20
10 min read

Flutter Flow: Service Location Dashboard Template

I built this Location Dashboard theme to solve a lot of problems asked by the community. Currently it has 46 Pages, 79 Action Blocks, 9 custom components, 4 custom actions, 19 custom functions, 2 custom widgets, 17 data types.

It’s not limited to the following concepts, but were the initial ideas I had in mind for this template.

  • Barber shop

  • Plumbing

  • HVAC

  • Tattoo shop

  • Mechanic

  • Travel agency

  • Photography

It includes the following features:

  • Google Map and any tile map supported by flutter_map (MapBox

  • Add locations from Google Place search or a Google map.

  • Adding Polygons and Polylines

  • Create Employee and Client profiles

  • Create Services

  • Create Jobs

  • Create User Links

  • Search Youtube with an option to get only live videos.

  • Get Youtube Playlist

I will explain in detail the purpose of each feature and possibilities it unlocks for your app.

I plan to also add optimized location routing and Stripe Checkout functionality.

I use custom data types through out so it will work with any backend.

I will briefly describe each feature but will have an external link that goes in depth on how each feature works

Destination

I have this concept of destinations that is very helpful in organizing places, but also is flexible enough to be optional.

A destination is a way to organize places on a map such as a city, neighborhood, etc. It will set the initial area of a map.

Places

Places is a common concept for location applications. For example I may want to show a few barbershops within a certain area. I can tie this to the destination of that area. You still have the flexibility of adding places without specifying a destination.

Maps

There are two different custom map widgets.

One of the widgets is an advanced version the custom Google Map widget I have published for free on the Flutter Flow marketplace. The additional features include the ability to add a list of polygons and polylines.

It now also uses custom data types instead of Supabase and Firebase Rows. I have custom mapping functions for this. I will also update the free version to utilize data types.

The second map widget is a tile map widget that uses the flutter_map widget. This allows you to use different third party map services such as Mapbox. It also gives you the option to use custom markers, polygons, and polylines.

Users

You can allow users to create their own accounts as usual. I also allow you to create “Customers”, which don’t have actual accounts, but is just a table to organize them.

You can tie these users to a place.

It is also possible to create users as an “admin” but this requires special setup on Supabase, Firebase, or the backend of your choice.

For Supabase, I have accomplished this with edge functions. As a user this requires extra setup, so it’s not as straightforward. There are cloud options I’m looking into to make this easier. This is optional but useful.

User Links

The user links page allows you to tie urls to a user. For example you may have a barbershop. Each barber can add their own social and booking links.

Services

This is an optional feature. It allows you to create services tied to a place and/or user. First you will create a service. From there, I have different screens to tie users and/or places to the service.

Continuing with the barber example, the barber can choose services to add from the allowed services.

Availability

There are different widgets that allow you to add availability times to a user. It also comes with a custom date range picker widget.

Choose coordinate widget

This widget allows you to choose a location on a map by dragging the map around. There is an icon included in the middle of the map to help determine the place you are selecting. This is especially useful when creating polylines and polygons.

Custom Bottom Sheet

There is a confirmation bottom sheet that is useful for things like confirming if a user wants to delete something from the database.

Youtube

There is a custom action that allow you to search for youtube videos. There is also an optional parameter that allows you to search for only live videos.

There is also a custom action that allows you get a list of videos from a Youtube playlist

Action blocks

For every action, I have action blocks so you can easily reuse the common actions in your new designs and features.

Final thoughts

If you have any suggestions on new features or ways to improve the template, feel free to reach out.

The template is currently under review by the Flutter Flow team.

I have also updated the free Google map widget to use data types so that you can easily use it with any database. It also includes functions to easily map firebase and supabase to the custom data type. It is somewhat similar to the one included in the new template. You can find it here: FlutterFlow Marketplace

Enjoy and thank you!