Flutter In Production : Fast Track Build A Movie App

In Hours Using FlutterFlow, TMDB API, And Firebase

This article is for the Flutter Surabaya Conference 2024 — Flutter in Production Extended, held by Flutter Surabaya Team on Saturday, January 11, 2025. This article guides participants through the hands-on workshop practice.

Have you ever wanted to build a sleek movie browsing app but felt overwhelmed by the complexity of mobile development? Or perhaps you’re a Flutter developer looking to dramatically speed up your development process?

Flutter in Production — Flutter Surabaya

You’re in the right place. In this hands-on tutorial, we’ll build a production-ready movie app in just a few hours, combining the power of FlutterFlow’s visual development platform with TMDB’s rich movie database and Firebase’s robust backend services.

Introduction

What We’ll Build

Imagine an elegant movie app where users can:

• Browse trending movies with smooth infinite scrolling
• Search for their favorite films with real-time results
• Save movies to bookmark with firebase
• View detailed movie information, trailers, and cast details

The best part? We’ll accomplish all of this without writing mountains of boilerplate code, thanks to FlutterFlow’s visual development environment and pre-built components.

Why This Stack?

• FlutterFlow: Accelerates development by 10x with its visual builder while generating clean, maintainable Flutter code
• TMDB API: Provides comprehensive movie data, including posters, ratings, and trailers — all for free
• Firebase: Handles authentication, cloud storage, and real-time updates with minimal setup

What You’ll Learn

By the end of this tutorial, you’ll understand how to:

• Set up a professional Flutter project structure in FlutterFlow
• Integrate and manage API calls to TMDB
• Implement Firebase Authentication and Cloud Firestore
• Create responsive layouts that work across all screen sizes
• Deploy your app to both App Store and Play Store

Prerequisites

• Basic understanding of Flutter concepts (widgets, state management)
• A FlutterFlow account (free tier works for this tutorial)
• A TMDB API key (we’ll show you how to get one)
• A Firebase account (free tier is sufficient)

Ready to build something amazing? Let’s dive in and transform this idea into a polished, production-ready app in the next few hours!

Note: All code samples in this tutorial are production-ready and follow Flutter best practices. We’ll focus on clean architecture principles while leveraging FlutterFlow’s visual development capabilities.

Preparation

1. Create FlutterFlow Account

1. Visit FlutterFlow and click “Get Started”
2. Sign up using your Google account or email
3. Choose the “Starter” plan (free) — it’s sufficient for this tutorial
4. Complete the onboarding process to familiarize yourself with the interface
5. Pro Tip: Take the 5-minute interactive tutorial to understand the basics of the FlutterFlow interface

2. Create TMDB Account

Step by step to create TMDB account (youtube)

1. Go to TMDB and click “Join TMDB”
2. Fill in your details and verify your email
3. Once logged in, navigate to your profile settings
4. Click on “API” in the left sidebar
5. Request an API key by clicking “Create” in the API section

• Choose “Developer” as your account type
• Fill in the application details:
• Application Name: “Movie App Tutorial”
• Application URL: You can use “http://localhost" for now
• Application Summary: “Building a movie app for learning purposes”

6. Save your API key securely — we’ll need it later

3. Create Firebase Account

1. Navigate to Firebase Console
2. Sign in with your Google account
3. Click “Create a Project”

• Name: “movie-app-tutorial” (or your preferred name)
• Disable Google Analytics (we will enable later)

4. Once your project is ready, set up the following:

Authentication:

• Go to Authentication > Get Started
• Enable Email/Password sign-in method
• Optionally, enable Google Sign-in

Cloud Firestore:

• Go to Firestore Database > Create Database
• Start in test mode (we’ll update security rules later)
• Choose a database location closest to your target users

5. Download your Firebase configuration:

• Click the gear icon next to “Project Overview”
• Select “Project Settings”
• Under “Your apps”, click the web icon (</>)
• Register your app with a nickname (e.g., “movie-app-web”)
• Copy the Firebase configuration object — we’ll need this in FlutterFlow

Flutter Flow Basic

Marketplace FlutterFlow

FlutterFlow’s marketplace is a goldmine for rapid development. Here’s what you need to know:

marketplace.flutterflow.io

Pre-built Components

• UI Kits: Ready-to-use components like movie cards, rating widgets, and carousels
• Theme Templates: Professional color schemes and typography setups
• Custom Widgets: Community-contributed specialized components

Basic Structure FlutterFlow

Understanding FlutterFlow’s structure is crucial for organized development:

A Page usually contains a combination of widgets and components. (https://docs.flutterflow.io/)

Let’s talk about widgets first, which are the atomic elements or building blocks of the UI structure in FlutterFlow.

Each widget can be thought of as an atom or a molecule, depending on its complexity and its parent-child relationship. For example, an atomic widget (such as TextField) cannot hold a child element, but molecular widgets (such as Column or Row) can.

You can read more about UI concept here. Fundamental is important!

This is layout structure of Flutter Flow app.

Widget view (app.flutterflow.io)

1. Pages

Main containers for your screens, organized in a tree structure, can be grouped by feature. You can view widget palette, widget tree, or story board.

Component view (app.flutterflow.io)

2. Components

Reusable widgets, custom UI elements, shared functionality

Backend with firebase (app.flutterflow.io)

Setup REST API Calls (app.flutterflow.io)

3. Backend

API configurations, firebase setup, state management. You can also set API call for various REST API method (GET, POST, PUT, PATCH. DELETE). FlutterFlow also provide Custom Functions and Custom Widgetmenu to help you write custom function & widget that not available default. In this case, you should know how to write code with Flutter.

Limitation

Understanding FlutterFlow’s limitations helps in planning your app architecture:

1. State Management

• Limited complex state management patterns
• Basic provider implementation
• No built-in BLoC or Riverpod support

2. Custom Animations

• Limited to pre-built animations
• Complex custom animations require manual code
• No support for Rive animations yet

3. Code Generation

• Generated code can be verbose, free-tier can’t export to flutter code or export to APK
• Limited code optimization options
• Some manual code cleanup needed for production

Step 1 : Clone movie template

1. Visit template here

Please visit this “Movie Template” and click Clone for Free button. If you not see this button, you should register / login first with your account same as your Flutter Flow email for development.

This template was integrated with Firestore (to store bookmark) and Firebase Auth (to register / login).

3. Wait for progress cloning template

After you clicked Clone For Free button, please wait some minutes and you will be redirected to detail project of Movie apps.

5. Try in preview

We need to setup Firebase and add our TMDB API Key first before running preview. You can you Thunder button in top right to run “Test Mode”.

Test Mode

Test Mode will be expired in 10 minutes, and you can click “Instant Reload” if the session was expired.

Step 2: Explanation of Project Structure

I will explain more deeply in hands-on session and will be updated in this article soon hehe. Thank you 😉

Step 3: Setup Firebase Project

1. Navigate to Firebase Console

Dashboard (firebase)

2. Sign in with your Google account

You can login with your Google primary or secondary account. Remember the account that use for Firebase must same as Flutter Flow.

3. Click “Create a Project”

• Name: “movie-app-tutorial” (or your preferred name)

Create a project name (firebase)

• Disable Google Analytics (skip, we can enable later). Click “Create Project” button and waiting for loading

4. Once your project is ready, set up the following:

Authentication:

• Go to Build > Authentication > Get Started

• Enable Email/Password sign-in method

Cloud Firestore:

• Go to Build > Firestore Database > Create Database (Location : Jakarta)

• Start in test mode (we’ll update security rules later)

• Choose a database location closest to your target users
• Create collections bookmarks and users

5. We will update rules later

Step 4: Setup TMDB API

1. Visit website TMDB here

Visit website TMDB and click button “Join TMDB” in navbar

2. Fill the form

Fill in your details and verify your email

3. Request API Key

1. Once logged in, navigate to your profile settings
2. Click on “API” in the left sidebar
3. Request an API key by clicking “Create” in the API section

• Choose “Developer” as your account type
• Fill in the application details:
• Application Name: “Movie App Tutorial”
• Application URL: You can use “http://localhost" for now
• Application Summary: “Building a movie app for learning purposes”

4. Copy API Key

Visit Profile > Edit Profile > API and copy API Key. If you can’t find page, you can visit here https://www.themoviedb.org/settings/api

Step 5: Setting TMDB API in Flutter Flow

Copy your API Key before and paste in Flutter Flow app. Choose menu App Values > App State > set apiKey. After that, you can test your app click “Test Mode” tunderbold icon top right and wait for some minutes.

Config setup apiKey

Waiting for Test Mode

Click button “Get Started” > Login as “Guest”. If list movie appear, so you successfully integrated TMDB API on Flutter Flow apps! 🎉🎉🎉

Successfully integrated TMDB API

💡Explanation:

I will explain more deeply in hands-on session and will be updated in this article soon hehe. Thank you 😉

Step 6: Setting Firebase in Flutter Flow

Setup Firebase

Open FlutterFlow > Choose Menu Setting

Copy your Firebase Project ID from console.firebase.google.com. Example you set movie-app-tutorial . Name same as project id that you created before. After that click “Connect” button

It will be get error like this

Go to your console.firebase.google.com and click Users and permissions

Click button “Add Member” and invite FlutterFlow email

• Email : firebase@flutterflow.io
• Role : Editor

Back to Flutter Flow and click “Connect” button again. And your project will be successfully connected. If you failed, you can click “Create Project” button to create firebase project auto from FlutterFlow

Successfully connected

After that, click “Generate Config Files”. Fill package name for your apps and project nickname. You can use whatever value or use default one. Click “Generate Files” button and waiting for some minutes.

Let’s next to Setup Firestore, our integrated database from Firebase.

Check your Firebase and make sure it connected to apps

💡 Explanation:

I will explain more deeply in hands-on session and will be updated in this article soon hehe. Thank you 😉

Setup Firestore

Before to Step 7, we must setup database first. Open FlutterFlow > Firestore > Choose gear icon > Firestore Settings

Scroll down to Firestore Rules. Set Bookmark Write to Everyone. And click “Deploy” button.

It will appear popup and click button “Deploy Now”

Successfully deployed!

Create collections users

In FlutterFlow, change to tab default and click “+” button

If appear this popup, click “Yes” button

Waiting for some minutes, and collections user will be generated

Test Mode

If you want to test is your firebase connected or not, you can running Test Mode and try to register an account. After app loaded, please click button “Member” and choose “Sign Up”

Fill the form and click “Sign Up” button

Check in your Firebase Console. User successfully created!

Successfully integrated with Firebase 🎉🎉🎉

Update profile

Change profile UI with authenticated user detail. Choose text with “Authenticated User” > “Email”

After that, click again and fill Default Variable Value with “User Email”

Reload Test Mode with “Instant Reload” button. Successfully loaded profile based on login account!

💡 Explanation:

I will explain more deeply in hands-on session and will be updated in this article soon hehe. Thank you 😉

Step 7: Add New Feature — Bookmarks

1. Create UI for bookmark

Change “Activity” pages with title “Bookmark”. We will use existing pages and changed to Bookmark list.

Add/drag widget ListView and 1 children ActivityCard inside it, remove other ActivityCard.

2. Implement button bookmark in movie detail

When user click button icon, it will try to create bookmark if movie not bookmarked. If bookmarked, it will be remove bookmark from database. Also icon button color will be dynamically changed based on isBookmarked state.

Add page state “isBookmarked”

Open “MovieDetail” pages. In Page Parameters, choose the rightmost tab to set “Local Page State Variable”. Click “Add Field” button

Add field name isBookmarked and type Boolean . Also checked “Initial Field Value”. After that, click “Confirm” button.

Focused on widget “MovieDetail” and choose tab “Activity” — 2nd tab from 5 tabs. After that click “Open” button.

Popup will appear and choose “On Page Load” from option

1. Add action 1 : must set default value for isBookmarked page state

2. Add action 2: Firestore Query

• Choose Collection : bookmark
• Query type : Single Document
• Filter 1 : movieId == movieId (pageParameter)
• Filter 2 : userId == User ID (Authenticate User)
• Action Output Variable Name : bookmarkedMovie

3. Add action 3 : Add conditional

• Choose conditions > Single Condition
• Search bookmarkedMovie and choose Reference (bookmarked ref)
• Change “Equal To” to “Is Set”
• Click Confirm

4. Add action in TRUE and FALSE

• If TRUE, add action “Update Page State” -> set value -> True
• If FALSE, add action “Update Page State” -> set value -> False

Add action when button bookmark clicked

Focused mouse to Bookmark icon, click “Open” button to edit Action Flow

After popup “Action Flow Editor” opened, default action will be like this

Please update action flow like this

Detail action 2: when user clicked button & isBookmarked, then remove bookmark movie from database

Detail action 5: when user clicked button & !isBookmarked, then add bookmark movie to database

3. Update list bookmark

Back to “Activity” page, focus on widget ListView, click Add Query like this image. Add filter userId == User ID (AuthenticatedUser)

It will appear popup like this, just click “Confirm” button

Focus on widget “Activity Card”, add Query API Call to get TvShowsInfo based on movieId

Change component parameter

4. Add action in list bookmark

Choose widget “Activity Card” > Choose Action Flow Editor. Check isMovie true, will be redirected to MovieDetails page. If false, will be redirected to TvShowsDetails

5. Try in preview

You can try to check if bookmark feature is success or not.

Step 8: Release code to Flutter Apps

You can export code with click </> button. Choose what do you want. If your account is Free Tier, you can’t Download Code and Download APK. You only can View Code and import manual in your local environment.

Generated code not good as a developer write a code. You can refactor later or use another state management like Riverpod or BLoC. If you want to fast track build UI, FlutterFlow is a good ways to try.

Conclusion:

Congratulations! You’ve just built a production-ready movie app in Flutter using FlutterFlow, TMDB API, and Firebase. Let’s recap what we’ve accomplished:

What We’ve Built

• A fully functional movie browsing application
• Clean, maintainable codebase using FlutterFlow
• Secure user authentication with Firebase
• Real-time data synchronization for bookmark
• Professional UI/UX with smooth animations
• Production-ready performance optimizations

Key Learnings

1. Rapid Development: FlutterFlow dramatically reduced our development time without sacrificing code quality
2. API Integration: We learned how to properly integrate external APIs (TMDB) in a Flutter application
3. Backend Management: Firebase provided a robust backend solution with minimal configuration
4. State Management: We implemented efficient state management for a smooth user experience
5. Production Deployment: We covered the essential steps for deploying a production-ready app

Next Steps

Want to take your app to the next level? Here are some suggestions:

1. Feature Enhancements

• Add user reviews and ratings
• Implement social sharing features
• Create personalized movie recommendations
• Add offline support

2. Technical Improvements

• Implement comprehensive error handling
• Add analytics tracking
• Optimize image caching
• Set up continuous integration/deployment

3. Monetization Options

• Premium features
• Ad integration
• Subscription model

Resources for Further Learning

• FlutterFlow Documentation
• TMDB API Documentation
• Firebase Flutter Codelab
• Flutter Production Best Practices

Community and Support

• Join our GitHub repository
• Follow us on Twitter @YourHandle
• Share your version of the app with #FlutterMovieApp

Remember: The best apps are those that continue to evolve based on user feedback and changing requirements. Don’t stop here — keep iterating, improving, and building upon what you’ve learned!

Final Thoughts

Building production-ready apps doesn’t have to be a months-long process. By leveraging the right tools and following best practices, you can create professional applications in hours rather than weeks. FlutterFlow, combined with powerful services like TMDB API and Firebase, provides a robust foundation for rapid development without compromising on quality.

Show me your work in this article comment section! 🚀