Building a FlutterFlow app

Recently we’ve written and shared a couple of blog posts surrounding Low-Code/ No-Code development platforms and the positive impact they can have on digital product development. Our previous posts include an introduction to No-Code development and an exploration into the future of automation testing using Low-Code/ No-Code platforms.

Over the last few months we've been working on a really interesting client project, which gave us a chance to utilise one of the most notable No-Code platforms, FlutterFlow - to build a digital platform for dog walkers. The idea behind the platform was to allow users to share dog walking routes, track their own routes on a map and pin relevant dog friendly locations (including dog friendly pubs and restaurants) and amenities (like dog bins) along the way.

It was a great opportunity to take our client’s idea from paper and turn it into a reality using FlutterFlow to build both an iOS and Android application with social media and Google Maps integration.

This post will look at some areas within the development process and highlight some of the features our team found particularly useful when using FlutterFlow.

Development with FlutterFlow

During the build of our client’s platform, we found FlutterFlow easy to use, cost effective and quick. A key benefit was that it allowed us to easily link our project to the GitHub repository and simply forward the code anytime to the repo.

FlutterFlow’s partnership with Algolia was extremely helpful for this project. Algolia is an AI powered search and discovery platform and it’s ultimately what allowed us to display users pins on the maps as a location discovery tool within the application. 

One of the advantages to using Algolia in this application was that it offered back-end APIs, front-end widgets, several integrations and a customisable relevant algorithm, which saved us a lot of time. 

Additionally, and at no extra cost, the platform captured and displayed important user metrics including click position, top searches and location of searches - all very useful information for us to iteratively enhance and improve the application over time.

FlutterFlow’s default integration with Google Maps, along with a pre-positioned widget meant that we could simply drag it from the “Base Elements” tab available in the “Widget Panel” of FlutterFlow. Technically this allowed us to enable users to interact with the map by zooming in and out, as well as pointing out nearby locations using markers.

Another key advantage of using FlutterFlow is its customisation feature, which allows developers to define parameters and check custom actions for any errors in the UI builder. During the project when we were working on the implementation of the live tracking feature via Google Maps, it meant we could easily customise the code accordingly.

Adding to this, one of the major challenges we faced while building the application was making sure the application screens were responsive and that the navigation bar remained persistent on screen. By using the customisation feature again with bespoke code, we could easily overcome these issues, creating a smooth user experience in terms of navigation across different screens, without the need to click on the navigation menu itself.

From a UI and UX perspective FlutterFlow also delivered, offering over 90 screen templates including a variety of login screens and splash screens for example, and over 80 pre-built widgets including drag and drop cards, list items and user profiles. These also helped our developers save a considerable amount of time during development. 

FlutterFlow’s drag and drop functionality worked seamlessly when it came to setting up user authentication within the platform. Our developers simply integrated Firebase and Google by setting up a console to drag the relevant widget to the login page in order to achieve this.

Key Takeaways

We were super excited about the first release of our client’s platform and developing this cross-platform application with FlutterFlow was a really positive experience.

The key benefit of using FlutterFlow was that we were able to use a single code for both the iOS and Android applications meaning we could use our time more efficiently vs. writing different code for each mobile platform.

Google Maps integration was simple with the Google Maps' widget and the customisation feature allowed us to define our own parameters including the ability to allow users to add custom pins and markers on the maps as well as pin locations. 

Following our experience, FlutterFlow could consider including a workflow builder so developers can add their own complex logic and process more efficiently - but this is only because the platform is still relatively new and there is a learning curve without much resource available to support developers who are new to the platform.