JediPixels/keiko_food_reviews · GitHub-Repository

Keiko Food & Travel Reviews

Flutter App for iOS, Android and Web

PROBLEM:

You have been hired by Bruno, aka, Hair Force One, yep that's his nickname since he always has the perfect hair and burly beard. Bruno has a consulting company that focuses on custom build mobile applications for iOS and Android. Bruno's new client is Keiko Corp., an Italian food and travel company. Their employees are paid to travel and sample food around the globe. Their job is to share their experiences for Keiko Food and Travel channel. How cool is that?

So, what are the requirements? The mobile application needs to record each journal entry with a review description, attach photo's, record location and sync data via Cloud. Keiko Corp. needs to release both iOS and Android apps and updates at the same time. They need the User Interface and User Experience to be exactly the same to show the company's branding. Bruno's company is used to building iOS apps with two different code bases, one for iOS and one for Android. This causes a big problem because of the development timeline constraints and additional development cost of assigning at least two developers, one for each project.

SOLUTION:

Flutter framework, Dart Language, Firebase Authentication, Firestore Database, Cloud Storage and Location Services to the rescue!!! With Flutter, you'll be able to build beautiful, natively compiled, multi-platform applications from a single codebase. You'll be able to build applications for mobile, web, desktop and embedded apps. The Flutter framework is used by the biggest companies in the world, Google, eBay, BMW, Toyota, Groupon, MGM Resorts, Philips hue and so on.

Now that we have chosen the development path, how do we create new users, authenticate them, separate data by each user, and sync the data via Cloud Worldwide? How do we attach photos to each journal entry? How do we obtain the location for each entry? You'll use Firebase Authentication to create new users, validate them, and authenticate login by user. You'll create a fully scalable Firestore database to handle storing data separated by users. To store each photo you'll use Cloud Storage, also separated by users. To record the user's location at time of review, you'll use Location Services to obtain the GPS location, and Reverse Geocoding to retrieve the street address, city, state, zip, country. All of our requirements are fulfilled by using Flutter, Dart, Firebase Authentication, Firestore Database, Cloud Storage, and Location Services.

WHAT YOU’LL LEARN

Build beautifully designed real-world enterprise-level mobile application for iOS, Android, and Web
Learn UI/UX techniques to wow the user’s experience and keep the company’s branding consistent between platforms
Use the latest cross-platform Flutter framework and Dart language to create pixel perfect UI designs and adaptivity
Learn Firebase Authentication to create end-to-end identity solution to create, validate and authenticate users
Learn Cloud Firestore to build serverless, secure Database that sync data between online and offline devices
Learn Cloud Storage to store and serve user generated content like photos
Learn how to sync data live between multiple devices allowing the user to switch between mobile and web
Learn how to restore user’s data on a new device
Learn to use Location Services to obtain GPS location and Reverse Geocoding to retrieve address
Lear to use Custom Clippers to create beautiful looking app bars
View and Zoom photos
Create reusable widgets
Use Layout Builder to create a responsive layout for mobile and web
Separate concerns between UI, state, business logic, and services
Learn how to use State Management without using third party libraries
Learn how to create reactive screens to refresh content
Learn how to apply beautiful animations to convey actions
Every feature and change made are fully released at the same time for both iOS, Android, and Web, one codebase to rule them all
Reliable, Scalable, Secure
Version Control Integration - GitHub
Learn how to ask for permissions to access location services, camera, and photo album

Course Curriculum

Introduction

What are your assignment tasks and goals?
A quick demo of what you’ll build
Who am I?

Base Application

Creating a new Flutter app for Keiko Food Reviews
Integrating version control by using GitHub
Laying out the app’s foundation
Creating base folder structures like helpers, logic, models, pages, services, state, and assets
Creating dark and light themes
Running the app and watching themes change automatically according to the device setting

Basic User Interface Layout

Introduction to base page structure, responsive layout builder and navigation
Adding app wide constants
Adding page stubs for review list, review grid photos and review map locations with default route names
Adding Responsive Layout Builder Widget for mobile and web
Adding Responsive Layout Builder handling navigation for mobile
Continue adding to the Responsive Layout Builder navigation for web
Adding image assets
Adding page stubs for user login, register, forgot password, review entry view, review entry edit, and review photo zoom with default route names
Adding routes navigation helper class
Into to the CustomClipper class for customizing the reviews list app bar
Creating the CustomClipper for customizing the reviews list app bar
Customizing the reviews list app bar

Add Dependencies

View different ways to add packages
Adding Camera, Photo Album, Location, Reverse Geocoding, Map, Firebase Authentication, Cloud Firestore, Cloud Storage packages, Cached Images, and intl packages via flutter pub command
Configure iOS Info.plist for Image Picker and Geolocator plugins
Configure Android AndroidManifest.xml Geolocator plugin
Enable CORS for Web development mode to view photos

Create the Firebase Project

Different ways to create a Firebase Project and benefits
Installing the Firebase CLI and FlutterFire CLI
Using the FlutterFire CLI to create a new Firebase Project
Initializing Firebase in the Flutter Project
Configuring the Android SDK version
Resources: Firebase CLI, FlutterFire CLI, Android SDK and Multidex links

Firebase Authentication

Enabling Authentication Sign-in Providers
Reviewing Authentication Email Templates
Creating Authentication Service - Create user
Creating Authentication Service - Sign in, sign out, password reset, email verification and email verified
Creating Authentication Business Logic - Part 1 - Validators, login register logic, error handling
Creating Authentication Business Logic - Part 2 - Private variables, login, register, check login email and password
Creating Authentication Business Logic - Part 3 - Check register email and password, show login error
Creating Authentication Business Logic - Part 4 - Create login logic
Creating Authentication Business Logic - Part 5 - Create user model calls and initialize new user default values
Creating Authentication Business Logic - Part 6 - Create database service for the user collection database, and add user
Creating Authentication Business Logic - Part 7 - Add to database service the get and update user
Creating Authentication Business Logic - Part 8 - Continue login register logic class by adding the register logic
Creating Authentication State
Resources: General overview of using Firebase App Check to prevent unauthorized access to our Firebase project, QuickType to create dart classes from JSON

Overview for Authentication Pages and Navigation

Introduction and explanations on creating Register User, Login User, and Forgot Password pages before and after implementing Named Navigation

Customize Register User Page

Introduction and basic tour and what you’ll build
Initializing business logic, text editing controllers, and base layout
Adding image and body structure
Adding email, password and confirm password entry fields
Creating the register button
Creating the register error message
Creating the login button and navigation

Customize Login Page

Introduction and basic tour and what you’ll build
Initializing business logic, text editing controllers, and base layout
Adding image and body structure
Adding email and password entry fields
Creating the login button
Creating the login error message
Creating the forgot password and create user button and navigation

Customize Forgot Password User Page

Connecting the business logic
Adding image and body structure
Adding email entry field
Creating the button to reset password or login

Authentication State Changes and Navigation

Introduction to Authentication State Changes and Navigation
Implementing the Authentication State Changes
Implementing the Named Routes Navigation

Cloud Storage

Enabling storage security rules
Creating storage service and upload photo method
Creating the delete photo method

Review Model

Introduction to the Review Model
Creating the base Review Model
Marking some variables and copy with methods optional
Adding object equality checks
Adding the Add New Review with Default Values

Cloud Firestore Database

Creating Firestore Database from Firebase Console and enabling database security rules
Adding Reviews Collection to the database service - Add Review
Adding Reviews Collection to the database service - Update Review - Handle Photo
Adding Reviews Collection to the database service - Update Review - Handle save to Firestore Database
Adding Reviews Collection to the database service - Delete Review
Adding Reviews Collection to the database service - Get Review List
Adding Reviews Collection to the database service - Get Review List with Photos

Location Services

Introduction to the Location Service
Creating the Location API Keys for Web - Get API Key
Creating the LocationService - Get Permission and Location
Creating the LocationService - Get Reverse Geo Coding

Additional Helpers and Reusable Widgets

Introduction to Helpers and Reusable Widgets
Creating app helpers - Arguments
Creating app helpers - Dialogs
Creating app helpers - Format Dates
Creating reusable widgets - Image Circle Shadow
Creating reusable widgets - Image and Message
Creating reusable widgets - Muted Text
Creating reusable widgets - Star Rating - Variables
Creating reusable widgets - Star Rating - Rating
Creating reusable widgets - Star Rating - Gesture Detector

Customize the Review List Page

Introduction to the Review List Page
Connecting the Review List (business) Logic
Modifying Themes Adding Custom Error Color
Creating the Review List Body Card - Base Layout, Dismissible and Delete Review Confirmation Dialog
Creating the Review List Body Card - Card, InkWell, Navigation and Hero
Creating the Review List Body Card - Aspect Ratio and Image Network showing Photo Thumbnail
Creating the Review List Body Card - Cached Network Image showing Photo Thumbnail
Creating the Review List Body Card - ListTile Title and Star Rating
Creating the Review List Body Card - ListTile Subtitle
Creating the Review List Body - Base Layout adding Custom Scrollview and Image with Message
Creating the Review List Body - Handle web and mobile showing either a Grid or List of items
Creating the Review List - Base Layout and Initialize Review List Logic
Creating the Review List - Refactor, alternate ways to store Stream inside Review List Logic
Creating the Review List - App Bar, Menu Actions, Add Review and Log Out
Creating the Review List - Safe Area and Stream Builder showing list of reviews or messages
Creating the Review List - Floating Action Button, and Navigation
Creating the Review List - Creating the Cloud Firestore Index
Customize Review Entry Photo Zoom Page
Introduction to the Review Entry Photo Zoom Page
Adding Base Layout, Navigation Arguments, App Bar and Body structure
Adding the Interactive Viewer to Zoom Image with the Image Network widget
Adding the alternate way to load image with the Cached Network Image

Customize Review Entry View Page

Introduction to the Review View Page
Adding Base Layout, Navigation Arguments, App Bar and Body structure
InkWell, Hero and Image Network showing Photo Thumbnail
Cached Network Image showing Photo Thumbnail
ListTile - Adding the title property and Star Rating
ListTile - Subtitle property adding a Column and Review details
ListTile - Subtile property adding Location Placemark in a Wrap widget
ListTile - Subtile property adding the Location on a Map with FlutterMap

Review Entry Edit Logic

Creating the Review Entry Edit (business) logic, Declaring Variables and Initializing Position Defaults
Adding the Get Location, Current Position, and Replace Location
Adding the Delete Location
Adding the Set Location and Address for Web
Adding the Set Location and Address for Mobile
Adding the Checking if Data Changed and Save Review
Adding the Cancel Editing Review and Delete Review
Adding the Select Date and Pick Image

Creating Review Entry Edit Page Widgets

Introduction to the Review Entry Edit Page Widgets
Creating the Review Entry Edit App Bar widget - Base Layout
Creating the Review Entry Edit App Bar widget - Title and Leading properties
Creating the Review Entry Edit App Bar widget - Actions
Creating the Review Entry Edit Photo widget - Base Layout
Creating the Review Entry Edit Photo widget - Image File and Image Network
Creating the Review Entry Edit Photo widget - Cached Network Image
Creating the Review Entry Edit Photo widget - Editing Card with Popup Menu Button - Take Photo
Creating the Review Entry Edit Photo widget - Editing Card with Popup Menu Button - Photo Album, Pick Image, Delete Photo
Creating the Review Entry Edit Photo widget - Adding Popup Menu Button
Creating the Review Entry Edit Date Picker widget - Base Layout
Creating the Review Entry Edit Date Picker widget - Creating the Date Picker Custom Button
Creating the Review Entry Edit Rating Affordability widget - Base Layout
Creating the Review Entry Edit Rating Affordability widget - Adding the Star Rating widget
Creating the Review Entry Edit Rating Affordability widget - Adding the Affordability Segmented Button
Creating the Review Entry Edit Text Fields widget - Base Layout
Creating the Review Entry Edit Text Fields widget - Adding the Text Fields Restaurant, and Title
Creating the Review Entry Edit Text Fields widget - Adding the Text Fields Category and Review
Creating the Review Entry Edit Placemark and Map widget - Base Layout
Creating the Review Entry Edit Placemark and Map widget - Adding the Position Value Listenable Builder
Creating the Review Entry Edit Placemark and Map widget - Adding the Location Placemark
Creating the Review Entry Edit Placemark and Map widget - Adding the Map
Creating the Review Entry Edit Placemark and Map widget - Adding the Progress Indicator
Creating the Review Entry Edit Placemark and Map widget - Adding the Replace Location Button
Creating the Review Entry Edit Placemark and Map widget - Adding the Delete Location Button

Customize Review Entry Edit Page

Introduction to the Review Entry Edit Page
Adding base layout, connecting Edit (business) Logic, declaring Text Editing Controllers, Value Notifiers, and Map Controller
Overriding the Did Change Dependencies method
Overriding the Dispose method
Adding the Will Pop Scope to Build method
Adding the Review Entry Edit App Bar widget and layout Body property
Adding the Review Entry Edit Photo widget and Review Entry Edit Date Picker widget
Adding the Review Entry Edit Rating and Affordability widget and the Review Entry Edit Text Fields
Adding the Review Entry Edit Placemark and Map widget

Customize Review Photos Grid Page

Introduction to the Review Photos Grid Page
Creating the Review Photos Grid (business) Logic
Connecting the Review Photos Grid Logic, App Bar and base layout
Adding body structure and StreamBuilder base layout
Adding GridView Builder to StreamBuilder handling Web or Mobile
Adding InkWell and navigation to photo zoom page
Adding Image Network
Adding Cached Network Image
Adding gradient title bar over image
Adding Cloud Firestore Index

Customize Review Map Locations Page

Introduction to the Review Map Locations Page
Creating the Review Map Locations (business) Logic
Creating the Review Map Locations Body widget that implements the Map
Connecting the Review Map Locations Logic, App Bar and base layout
Adding StreamBuilder to body, connecting to the Review Map Locations Body and update packages, pubspec yaml file

Refactoring

Refactoring the User Register, User Login, and User Forgot Password pages AnimatedBuilder to ListenableBuilder
Refactoring the pubspec.yaml file 100% sound null safety
Running the Dart Analysis

Conclusion

Big Congratulatory Animation. What you have accomplished and learned
Taking a look at the top widgets, reactivity, functions, methods, techniques used

Resources:

The following are different resources for your Flutter Development.

GitHub - Keiko Food Reviews
https://github.com/JediPixels

Image Assets Only
https://github.com/JediPixels/keiko_food_reviews/tree/main/assets/images

YouTube Channel
https://youtube.com/@JediPixels

On Twitter
https://twitter.com/JediPixels

Flutter Website
https://flutter.dev

Dart Website
https://dart.dev

Official Flutter Packages
https://pub.dev

Announcing Dart 3 (100% Sound Null Safety) https://medium.com/dartlang/announcing-dart-3-53f065a10635

Sound Null Safety https://dart.dev/null-safety#enable-null-safety

Build and Release Android App
https://docs.flutter.dev/deployment/android

Build and Release iOS App
https://docs.flutter.dev/deployment/ios

Build and Release Web App
https://docs.flutter.dev/deployment/web

Firebase

Firebase Home Page
https://firebase.google.com

Firebase Console
https://console.firebase.google.com

Article: App Check
https://firebase.google.com/docs/app-check

FlutterFire CLI
https://firebase.google.com/docs/flutter/setup?platform=ios

Android SDK and Multidex https://developer.android.com/build/multidex

Restore User’s Data on New Device

The user needs to login into the new device and once they login the data is restored and synced.

Community Online

Flutter Discord
https://discord.com/invite/N7Yshp4

Reddit
https://www.reddit.com/r/FlutterDev

Stack Overflow
https://stackoverflow.com/tags/flutter

Breaking Changes https://groups.google.com/forum/#!forum/flutter-announce

Community Slack
https://fluttercommunity.dev/joinslack

Flutter Issue Tracker
https://github.com/flutter/flutter/issues

Flutter Public Announcements
https://groups.google.com/g/flutter-announce

Pub - The official package repository for Dart and Flutter apps
https://pub.dev

Additional Resources

Firebase CLI - Setup the FlutterFire CLI

https://youtu.be/FkFvQ0SaT1I
https://firebase.google.com/docs/flutter/setup?platform=ios
https://www.youtube.com/playlist?list=PLl-K7zZEsYLnfwBe4WgEw9ao0J0N1LYDR

Enable Impeller Engine

https://docs.flutter.dev/perf/impeller flutter run web --enable-impeller (example)

Create Production Compiles for iOS and Android

Create Android Google Play Version flutter build appbundle --build-number=2 (increase build-number for each release)

Create Apple Store iOS Version flutter build iOS

Create Production Compiles for Web

Web - Run in Chrome Render HTML flutter run -d chrome --web-renderer html

Web - Run in Chrome using the default renderer option (auto): flutter run -d chrome

Web - Run your app in profile mode using the HTML renderer:
flutter run -d chrome --web-renderer html --profile (profile to analyze performance)

Web - Build your app in release mode, using the default (auto) option: flutter build web --release

Web - Build your app in release mode, using just the CanvasKit renderer: flutter build web --web-renderer canvaskit --release

Web - Build your app in release mode, using just the HTML renderer: flutter build web --release --web-renderer html

Web - Build your app in release mode, using Auto Detect renderer: flutter build web --release --dart-define=FLUTTER_WEB_AUTO_DETECT=true

Original-README