July 2022 Summaries

Choice Chips, part of Material Design components, are used in applications to simplify the selection process from a set of options, allowing for single or multiple selections. This tutorial demonstrates how to use the Choice Chips widget in FlutterFlow to filter Firestore query results, exemplified by a simple restaurant menu filter app. The app includes a Menu Page, where users can apply filters to view their preferred food dishes, using the Choice Chips to specify their preferences. It outlines the steps needed to set up the Firestore database, including the creation of a "menu" collection with appropriate fields, and the implementation of a filtering mechanism using Choice Chips. The guide provides a step-by-step approach to adding Choice Chips to the Menu Page, customizing their style, and setting up queries to display filtered menu items based on user selections. The tutorial also highlights additional applications for the Choice Chips filter, such as in e-commerce apps, and offers a clonable version of the project for users to explore and test.

In the final installment of a blog series about enhancing a Todo app with FlutterFlow, the focus is on integrating a simple search functionality to improve user experience by allowing users to easily search their task lists. Building on previous posts that covered Firebase Authentication and storing tasks in Firestore, this guide provides detailed steps for implementing a search bar, updating backend queries, and managing local state variables to toggle between displaying full task lists and search results. It emphasizes defining actions for the search input field and managing the visibility of task lists using conditional logic. Despite the straightforward implementation, the article notes that this approach may be slow for large Firestore collections, suggesting Algolia Search as an alternative for better performance. The series concludes with an invitation to explore a clonable version of the app and references to relevant documentation for further assistance.

In this detailed guide, the focus is on developing a driver-side app for a ride-hailing service using FlutterFlow and Firebase, with an emphasis on real-time location tracking and ride management features. The app allows drivers to view and accept pending bookings, displaying estimated travel durations using a custom widget that interfaces with the Google Maps Distance Matrix API. The setup includes querying Firestore for booking data, updating driver details, and implementing a real-time location preview on a map through custom widgets like RouteViewLive. These widgets and methods facilitate continuous location updates to Firestore, enabling dynamic route visualization and user interaction without manual triggers. Additionally, the guide encourages customization and adaptation of the code for other applications, such as food delivery apps, demonstrating the versatility of FlutterFlow's custom functions, widgets, and actions.

The blog post discusses implementing real-time tracking in a ride-hailing app using FlutterFlow, Firebase, and Google Maps. It explains how to build a Rider App, which allows users to choose their destination and book a cab while providing real-time updates of the driver's location. The article guides readers through configuring Google Maps APIs, setting up a Firestore database for ride management, and integrating custom widgets for route visualization. It emphasizes the importance of null safety, highlights the use of FlutterFlow's GoogleMap widget, and addresses limitations by incorporating custom code. The blog also explains the process of creating RouteViewStatic and RouteViewLive widgets for drawing static and real-time updating routes, respectively, and covers the steps for configuring and running the app on mobile platforms. The upcoming article promises to focus on the Driver App, which will handle driver-specific functionalities like viewing and accepting bookings.