Travel App (with local 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 uses local data, meaning the information about these places is stored within the app itself.
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 local 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:
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.
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.
Inside the ListView, add the 'card_54_TravelCard' from Templates and remove the price container widget.
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 Create a custom data type
For each place, we display its name, image, rating, and favorite status. To hold this information for every place, we can create a custom data type named 'place' and add these fields.
Tip: We already have this data type created for you in the starter app.
Here's how it looks after adding:
4.2 Create app state variable
The App state variable is accessible throughout the app. Let's create one with the name 'places' using the data type 'place' (created in the previous step). This will be used to store a list of places.
After creating, you can add some data about places by clicking on 'Tap to Edit Fields.'
Tip: We already have this variable created for you in the starter app.
Here's how it looks:
4.3 Showing a list of places on Home page
To display places on the ListView widget, you'll first Generate Children from a Variable, then display data on the widget using the Set from Variable menu > [generate_children_from_variable_name] item. Set Available Options to Data Structure Field > 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 > [generate_children_from_variable_name] item > Data Structure Field > 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 status
Whenever users click on the heart icon button, we need to update the status in an app state variable. We can do so using the Update App State 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.
Example project link
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:
Connect with external data sources
You can connect this app with Firebase Database, Supabase, or your own data source via API.
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:
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
