Travel App (Firestore data)

This tutorial guides you through creating a travel app that showcases popular destinations. Users can explore a list of recommended places and easily save their favorites by tapping the heart icon. Furthermore, they can see all their favorite places on a new page.

This app gets its data from a Firestore Database.

Here's how it looks when completed:

What you'll learn

  • Building or designing a page (adding UI elements)

  • Display widgets based on conditions

  • Navigating to a new page

  • Adding animation

  • Changing typography

  • Changing app colors and setting dark/light theme mode

  • Store and retrieve Firestore data

  • Adding interactivity to UI elements

  • Running your app

Building an App

The steps to build the app are as follows:

1. Clone or create a project

To kick off your project, the first step is to create a new project. However, to make things easier, we've already created a starter app for you. Simply open this link, click the 'Clone' button, and the project will be instantly added to your account.

2. Building the UI

In this step, we'll add the UI elements or widgets for the 'Home' and 'Favorite' pages and the navigation between the two pages.

2.1 Building Home page

This page shows all the popular places. Tip: In the starter app, we have already created this page so that you can directly start adding widgets.

To build the home page:

  1. Add the IconButton widget on the AppBar. From the Properties Panel, remove the Fill Color, Border Color, and Border Width. And then set the heart icon. This will be used to allow users to navigate to the Favorites page.

  1. Open the widget tree, add the ListView widget inside the Column, and from the properties panel, make it Expanded so that it takes all the available space.

    1. Inside the ListView, add the 'card_54_TravelCard' from Templates and remove the price container widget.

  1. On the right side of the destination name, add the Conditional Builder widget. This widget will dynamically display different heart icons based on whether the place is marked as a favorite or not. We'll add the condition in the later section of this guide. For now, simply add the IconButton widget with enabled and disabled heart icons for the IF and ELSE conditions.

2.2 Building favorites page

The Favorites page shows a list of favorite places saved by the user. Let's add a new page from a template "Lists > List 08 - Product List".

Give it a name, remove the unnecessary widget, and then change the AppBar type to match our design.

2.3 Navigate from home to favorites page

You can navigate from the Home page to the Favorites page by adding the Navigate To action on a widget (i.e., heart icon button in the app bar).

3. Customize design

In this step, we'll add animation, change fonts and app colors, and set the dark or light theme mode.

3.1 Adding animation

Animation helps your app look more polished. Let's add a slide animation on the 'card_54_TravelCard' widget.

3.2 Change typography

Let's give this app a touch of personalization by customizing the text styling. FlutterFlow allow you to have complete control over the font style throughout your entire app. No need to change fonts for each individual widget – simply head to the Typography section and make the app-wide font adjustments.

3.3 Change app color (set dark or light theme mode)

You can customize the app's appearance by changing colors from Theme Settings > Colors menu. Additionally, you can set the dark or light theme colors from here.

You can use the Dark/Light mode switch on the canvas to see how the app will look.

By default, the dark theme support is already enabled, and the colors are set accordingly. The only thing left for you is to provide users with a way to change the theme. Now that you know how to add action, you can add a button somewhere in the app and then add the 'Set Dark Mode Setting' action.

4. Adding data and logic

In this step, we'll add all the required data and logic to make the app functional.

4.1 Connect to Firebase project

To be able to store and retrieve data from Firestore Database, we must connect the project to Firebase.

Here's how it looks after connecting:

Connect to Firebase

4.2 Creat collection and add data

For each place, we display its name, image, rating, and favorite status. To hold this information for every place, we can create a collection named 'places' and add these fields like below:

'places' collection

Tip: You can click on 'Manage Content' and use the Firestore Content Manager to directly upload the places' data using the CSV file. To add data quickly, you can use the following CSV file with all places' information.

5KB
places.csv

Here is how it looks after data is added:

'places' collection with data

4.3 Showing a list of places on Home page

To display places on the ListView widget, you'll first query a collection, then display data on the widget using the Set from Variable menu > [collection_name] Document and Available Options to Field to display data from.

4.4 Adding a condition to determine the place status

Let's add a condition that determines if the place is marked as a favorite or not. Inside the ConditionalBuilder widget (added in step 2.1) > IF section > select Unset > [collection_name] Document > Field name (that holds the favorite status, i.e., 'is_favorite').

Here we directly provided the 'is_favorite' value because it's a boolean variable.

That means if the place is marked as a favorite, the widget added under If widget will be displayed. i.e., solid heart icon. And if not, the widget under the Else widget, i.e., the outlined heart, will be displayed.

4.5 Update place staus

Whenever users click on the heart icon button, we need to update the status in the 'is_favorite' field of that particular place. We can do so using the Firestore Update Document action.

You must add this action on both IconButton widgets, where one marks the status as False and the other as True. Tip: You can copy paste the action to speed up.

4.5 Showing places on Favorites page

The instructions for displaying places on the 'Favorites' page are mostly similar to the 'Home' page (see step 4.3). The main difference is that on the 'Favorites' page, you need to filter the places and only display those that have been marked as favorites.

Here's how you do it:

5. Running the app

Now it's time to run and see how it works. FlutterFlow allows you to test a fully-functional version of your app in Run mode. The Run mode typically requires around 2-4 minutes (or more, depending on the size of your project). However, to see your changes immediately, you can run your app in a Test mode that uses Flutter's "Hot Reload" feature.

Running the app

Here you have the complete working sample of this project.

What's next?

Once you've confidently grasped the basics, you can elevate your knowledge and skillset by adding the following advanced features:

Replace Conditional Builder widget with ToggleIcon

By replacing the Conditional Builder widget with ToggleIcon, you gain the ability to toggle between two icons representing different states. This eliminates the need for the explicit addition of two actions to update the 'is_favorite' status since the ToggleIcon widget takes care of it all for you.

Here's how you can replace it:

Enable Infinite scroll

By enabling infinite scroll, you can automatically load the new places as you scroll down the list. You can enable this option while you query a collection.

Enable Infinite scroll

Adding custom functions

A custom function is a custom code that performs a specific task. In this example, you could create a custom function that calculates and display the distance between the user's current location and travel place. Tip: You also get AI Code Assistant that helps you write the desired code.

Here's how it looks:

Custom functions to calculate distance

Opening Map

FlutterFlow offers a range of ready-to-add actions that enhance your app functionality quickly. Launching a map is one of them. In this example, you can use the place's lat long data to open the place directly in a Google, Apple, or Waze map.

Here's how you do it:

Publish to Web

You can also build and publish web applications in addition to your mobile apps. This feature opens up opportunities to reach a broader audience and provide a unified presence across different platforms.

Here's how this example app looks when published to the Web:

Problems?

If you're experiencing any issues with the app, ensure that you have followed the instructions correctly. For troubleshooting, refer to our comprehensive guide or seek assistance from the Community Forum. If you're still encountering problems, don't hesitate to report the issue to our support team.

Last updated