Back to courses

Build a Yelp! Clone for Restaurants with Flutter and Dart

Build a comprehensive Flutter app for mobile (iOS & Android) and web that allows users to write reviews, ratings, photos, locations, and syncs via the Cloud.

22 Days

Average time students take to complete this course.

instructor
Taught by: Marco Napoli
Last updated: June 2024

Overview

This isn't just any Flutter practice project...it's a true portfolio project that allows you to dive deep and practice your Flutter and Dart skills while building a beautiful, enterprise-level app that will be the highlight of your portfolio!

What you'll learn

  • Build a comprehensive Flutter app for mobile (iOS and Android) and web that showcases your ability to create unified UI/UX across platforms.
  • Utilize the Flutter framework and the Dart programming language for cross-platform development, demonstrating your proficiency in these tools.
  • Implement Firebase Authentication and Firestore Database for user authentication and real-time data storage, enhancing your app with cloud-based services.
  • Incorporate Cloud Storage and Location Services to allow users to attach photos and record locations, adding depth to the app's functionality.
  • Engage in a fictional scenario that adds an element of fun to the project, simulating a real-world app development experience for a food and travel company.
  • Develop enterprise-level app development skills by creating a feature-rich application, improving your portfolio and showcasing your technical capabilities.

Why Is This Flutter Project Awesome?

In this project you'll build a comprehensive Flutter app for mobile (iOS and Android) and web that allows users to write restaurant reviews including star & price ratings, attaching photos, recording locations, and syncing data via the Cloud.

The UI and UX will be the same across platforms in order to show the company's branding. To accomplish this you'll be using a wide array of tools including the Flutter framework, the Dart programming language, Firebase Authentication, Firestore Database, Cloud Storage and Location Services.

But even better is that you'll get the full app-building experience by being put in a fictional scenario where you've been hired by Bruno a.k.a. Hair Force One (yep that's his nickname since he always has the perfect hair!) to help build a custom mobile application for iOS and Android for Bruno's new client, Keiko Corp., an Italian food and travel company. Their employees are paid to travel and sample food around the globe, and their job is to share their experiences for Keiko Food and Travel channel. How cool is that?

Wait... What's a Project?

One of the most common things we hear from students is: "I want to build more projects!"

We love hearing that, because building projects is really the best way to learn. And unique, challenging projects can really make your portfolio stand out for potential employers.

But also...it just feel so good when you actually build something real!

That's why we've created ZTM Projects. A collection of comprehensive portfolio and practice projects that you can use to advance your knowledge, learn new skills, build your portfolio, and sometimes even just have fun!

What Else Should I Know?

By becoming a ZTM member you'll not only get access to all our courses, bytes, and projects.

But you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Most importantly, you'll be learning from an industry professional (Marco) that has actual real-world experience as a Flutter Developer. He teaches you the exact strategies and techniques he uses in his role.

Finally, as with all ZTM courses, this course is a living thing. It will be constantly updated as the landscape changes so you can use it as your go-to resource for building Flutter projects now and throughout your career.

Join 1,000s of Zero To Mastery graduates that have gotten hired and are now working at companies like Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies.

They come from all different backgrounds, ages, and experiences. Many even started as complete beginners.

So there's no reason it can't be you too.

And you have nothing to lose. Because you can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start building this Flutter project today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Join Zero To Mastery Now

Course curriculum

Here's an overview of what you'll learn in this Flutter project.

Introduction

5 lectures

Project Demo4:14

PREVIEW

Project FAQ

BEGIN

Project Resources

BEGIN

Exercise: Meet Your Classmates and Instructor

BEGIN

Set Your Learning Streak Goal

BEGIN

Base Application

7 lectures

Your Mission...3:56

BEGIN

Create Project4:25

BEGIN

Integrating Version Control with Github3:13

BEGIN

App Foundation5:58

BEGIN

Base Folder Structure2:48

BEGIN

Dark & Light Themes7:41

BEGIN

Run Themes Changes3:21

BEGIN

Basic User Interface Layout

12 lectures

Introduction to Base Page Structure, Responsive Layout Builder and Navigation1:06

BEGIN

Constants4:40

BEGIN

Page Stubs Base Navigation4:57

BEGIN

Responsive Layout Builder4:14

BEGIN

Home Responsive Layout Builder - Mobile5:46

BEGIN

Home Responsive Layout Builder - Web Desktop Tablet7:53

BEGIN

Image Assets4:30

BEGIN

Page Stubs Authentication - Review Entry Photo7:39

BEGIN

Routes Class6:34

BEGIN

Custom Clipper - Intro1:26

BEGIN

Custom Clipper - Class4:32

BEGIN

Reviews List AppBar with Custom Clipper4:57

BEGIN

Dependencies

5 lectures

Different Ways to Add Packages2:51

BEGIN

Add Packages Dependencies (Camera, Photo Album, Location, Reverse Geocoding, etc.)6:11

BEGIN

iOS Info.plist - Image Picker Location Permissions1:48

BEGIN

Android Manifest Location Permissions2:14

BEGIN

Enable CORS2:42

BEGIN

Create Firebase Project

6 lectures

Resources: Firebase CLI, FlutterFire CLI, Android SDK and Multidex Links

BEGIN

Different Ways to Create Firebase Project3:46

BEGIN

Install Firebase CLI and FlutterFire CLI5:47

BEGIN

Create New Firebase Project with FlutterFire CLI5:13

BEGIN

Initialize Firebase2:20

BEGIN

Android SDK Version2:04

BEGIN

Firebase Authentication

14 lectures

Enabling Authentication - Sign In Providers1:30

BEGIN

Reviewing Authentication - Email Templates0:56

BEGIN

Create Authentication Service - CreateUser6:42

BEGIN

Create Authentication Service - Sign In & Out, Password Reset, Email Vertification6:29

BEGIN

Authentication Business Logic - Part 1 (Validators, Error Handling)6:12

BEGIN

Authentication Business Logic - Part 2 (Private Variables)7:57

BEGIN

Authentication Business Logic - Part 3 (Check Register Email)5:50

BEGIN

Authentication Business Logic - Part 4 (Create Login Logic)2:05

BEGIN

Authentication Business Logic - Part 5 (Create User Model Calls, New User Default Values)4:34

BEGIN

Authentication Business Logic - Part 6 (Create Database Service)5:48

BEGIN

Authentication Business Logic - Part 7 (Get and Update User)6:31

BEGIN

Authentication Business Logic - Part 8 (Adding Register Logic)5:25

BEGIN

Creating Authentication State5:55

BEGIN

Extra Resources: Firebase App Check

BEGIN

Overview Authentication Pages and Navigation Paths

1 lectures

Introduction & Explanations1:30

BEGIN

Customize Register User Page

7 lectures

Introduction0:52

BEGIN

Base Layout6:49

BEGIN

Base Layout - Image, Body Structure and Email7:09

BEGIN

Base Layout - Password and Confirm6:59

BEGIN

Base Layout - Register Button4:36

BEGIN

Base Layout - Register Error Message3:28

BEGIN

Base Layout - Login Button and Navigation4:06

BEGIN

Customize Login Page

7 lectures

Introduction0:52

BEGIN

Base Layout5:16

BEGIN

Base Layout - Email5:54

BEGIN

Base Layout - Password5:12

BEGIN

Base Layout - Login Button2:50

BEGIN

Base Layout - Login Error Message3:47

BEGIN

Base Layout - Forgot Password and Create User Buttons5:25

BEGIN

Forgot Password Page

4 lectures

Base Layout4:56

BEGIN

Base Layout - Image, Body Structure and Email4:42

BEGIN

Base Layout - Reset Password Button3:54

BEGIN

Base Layout - Login Button3:32

BEGIN

Authentication State Changes and Navigation

3 lectures

Introduction1:18

BEGIN

Implementing the Build Material App5:40

BEGIN

Implementing the Authentication State and Named Routes Navigation7:22

BEGIN

Cloud Storage

3 lectures

Enabling Security Rules3:07

BEGIN

Storage Service - Upload Photo9:10

BEGIN

Storage Service - Delete Photo4:18

BEGIN

Review Model

5 lectures

Introduction1:00

BEGIN

Creating Review Model2:12

BEGIN

Creating Review Model - Optionals2:26

BEGIN

Creating Review Model - Equality Operator5:59

BEGIN

Creating Review Model - Add New Review with Default Values4:00

BEGIN

Cloud Firestore Database

7 lectures

Create Firestore Database and Enable Security Rules4:12

BEGIN

Database Service - Add Review6:53

BEGIN

Database Service - Update Review - Handle Photo7:21

BEGIN

Database Service - Update Review - Handle Save to Firestore2:08

BEGIN

Database Service - Delete Review2:30

BEGIN

Database Service - Get Review List6:22

BEGIN

Database Service - Get Review List with Photos7:38

BEGIN

Location Services

4 lectures

Introduction1:00

BEGIN

Get API Key2:33

BEGIN

Get Permission and Location8:53

BEGIN

Get Reverse Geocoding4:44

BEGIN

Additional Helpers and Reusable Widgets

10 lectures

Introduction2:19

BEGIN

App Helpers - Arguments3:22

BEGIN

App Helpers - Dialogs5:05

BEGIN

App Helpers - Format Dates3:00

BEGIN

Reusable Widgets - Image Circle Shadow3:06

BEGIN

Reusable Widgets - Image and Message4:56

BEGIN

Reusable Widgets - Muted Text2:27

BEGIN

Reusable Widgets - Star Rating - Variables3:25

BEGIN

Reusable Widgets - Star Rating - Rating2:52

BEGIN

Reusable Widgets - Star Rating - Gesture Detector6:14

BEGIN

Customize the Review List Page

17 lectures

Introduction1:03

BEGIN

Review List Logic5:04

BEGIN

Modifying Themes - Custom Error Color1:20

BEGIN

Review List Body Card - Base Layout and Dismissible6:57

BEGIN

Review List Body Card - Card, InkWell, Navigation and Hero3:37

BEGIN

Review List Body Card - Hero, Aspect Ratio and Image Network4:19

BEGIN

Review List Body Card - Cached Network Image3:34

BEGIN

Review List Body Card - ListTile Title Star Rating4:00

BEGIN

Review List Body Card - ListTile Subtitle7:09

BEGIN

Review List Body - Base Layout, Image and Message4:23

BEGIN

Review List Body - Sliver Grid or Sliver List5:08

BEGIN

Review List - Initialize Logic and Stream2:55

BEGIN

Review List - Refactor Logic2:49

BEGIN

Review List - App Bar, Menu Actions6:28

BEGIN

Review List - Safe Area and Stream Builder7:28

BEGIN

Review List - Floating Action Button and Navigation4:26

BEGIN

Review List - Cloud Firestore Index2:17

BEGIN

Review Entry - Photo Zoom Page

4 lectures

Introduction0:43

BEGIN

Base Layout and Navigation Arguments3:27

BEGIN

Hero and Image Network Widget3:16

BEGIN

Cached Network Image2:52

BEGIN

Review Entry - View Page

8 lectures

Introduction1:45

BEGIN

Base Layout4:57

BEGIN

InkWell, Hero and Image Network4:58

BEGIN

Cached Network Image2:37

BEGIN

ListTile - Title and Star Rating4:12

BEGIN

ListTile - Subtitle Property - Column and Review Details3:19

BEGIN

ListTile - Subtitle Property - Location Placemark in a Wrap Widget1:32

BEGIN

ListTile - Subtitle Property - Map with FlutterMap7:34

BEGIN

Review Entry - Edit Logic

8 lectures

Create Review Entry Edit Logic6:03

BEGIN

Set Location and Address - Web3:35

BEGIN

Set Location and Address - Mobile3:17

BEGIN

Get Location, Current Position, and Replace Location5:54

BEGIN

Check if Data Changed and Save Review6:30

BEGIN

Delete Location5:52

BEGIN

Cancel Editing Review and Delete Review6:16

BEGIN

Select Date and Pick Image7:48

BEGIN

Review Entry - Edit Widgets

25 lectures

Introduction2:22

BEGIN

App Bar Widget - Base Layout4:50

BEGIN

App Bar Widget - Title and Leading Properties4:53

BEGIN

App Bar Widget - Actions4:56

BEGIN

Photo Widget - Base Layout4:07

BEGIN

Photo Widget - Image File and Image Network4:47

BEGIN

Photo Widget - Cached Network Image2:43

BEGIN

Photo Widget - Take Photo5:48

BEGIN

Photo Widget - Pick Photo5:35

BEGIN

Photo Widget - Take or Pick Photo Logic6:55

BEGIN

Date Picker Widget - Base Layout3:16

BEGIN

Date Picker Widget - Custom Button5:56

BEGIN

Affordability Widget - Base Layout3:58

BEGIN

Affordability Widget - Star Rating3:44

BEGIN

Affordability Widget - Affordability Segmented Button7:17

BEGIN

Text Fields Widget - Base Layout3:50

BEGIN

Text Fields Widget - Restaurant and Title3:18

BEGIN

Text Fields Widget - Category and Review2:51

BEGIN

Placemark and Map Widget - Base Layout4:31

BEGIN

Placemark and Map Widget - Position Value Listenable Builder3:01

BEGIN

Placemark and Map Widget - Location Placemark2:16

BEGIN

Placemark and Map Widget - Map6:57

BEGIN

Placemark and Map Widget - Progress Indicator3:07

BEGIN

Placemark and Map Widget - Replace Location Button5:57

BEGIN

Placemark and Map Widget - Delete Location Button2:36

BEGIN

Review Entry - Edit Page

11 lectures

Introduction1:13

BEGIN

Base Layout4:42

BEGIN

Navigation Arguments and Edit Logic7:43

BEGIN

ValueNotifier Class6:20

BEGIN

Dispose Method2:11

BEGIN

WillPopScope Widget2:30

BEGIN

App Bar Widget - Layout Body Property1:40

BEGIN

Photo Widget and Date Picker Widget3:02

BEGIN

Rating Widget and Affordability Widget2:03

BEGIN

Placemark Map Widget2:31

BEGIN

Adding New Review4:08

BEGIN

Review Photos - Grid Page

10 lectures

Introduction1:23

BEGIN

Grid Logic3:23

BEGIN

Base Layout2:42

BEGIN

StreamBuilder5:52

BEGIN

GridView Builder3:47

BEGIN

InkWell2:31

BEGIN

Image Network2:58

BEGIN

Cached Network Image2:32

BEGIN

Title Bar Gradient5:52

BEGIN

Cloud Firestore Index2:30

BEGIN

Review Map - Locations Page

5 lectures

Introduction1:09

BEGIN

Locations Logic3:19

BEGIN

Review Map Locations Body Widget8:42

BEGIN

Base Layout2:18

BEGIN

StreamBuilder, Update Packages, and Pubspec.yaml File8:32

BEGIN

Refactoring

3 lectures

Refactoring, AnimatedBuilder to ListenableBuilder2:21

BEGIN

Sound Null Safety3:01

BEGIN

Dart Analysis3:17

BEGIN

Conclusion

2 lectures

Mission Accomplished!3:30

BEGIN

Top Widgets, Features, Techniques6:08

BEGIN

Where To Go From Here?

1 lectures

Review This Project!

BEGIN

Meet your instructor

Your instructor (Marco) isn't just an expert with years of real-world professional experience. He has been in your shoes. He makes learning fun. He makes complex topics feel simple. He will motivate you. He will push you. And he will go above and beyond to help you succeed.

Marco Napoli

Hi, I'm Marco Napoli!

Marco is a Mobile App Developer with over a decade of experience. He loves sharing the latest skills to build beautiful, functional mobile applications, but he cannot code without his trusty companions: espresso, cappuccino, and coffee.

SEE MY BIO & COURSES

Marco Napoli

Mobile App Developer

Frequently asked questions

Are there any prerequisites for this course?

Required:

  • Intermediate knowledge of Flutter. Don't have that? Take the Flutter Bootcamp course now!
  • Intermediate knowledge of Dart. Don't have that? Take the Dart Bootcamp course now!

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Are there subtitles?

Yes! We have high quality subtitles in 11 different languages: English, Spanish, French, German, Dutch, Romanian, Arabic, Hindi, Portuguese, Indonesian, and Japanese.

You can even adjust the text size, color, background and more so that the subtitles are perfect just for you!

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Invest in a better you. For less than a coffee a day.

Choose your currency:
$ USD US Dollar
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

MOST POPULAR

Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$23 / month
$279 / year
You're committed to getting hired and starting a career in tech
Start Learning Now
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.