JediPixels/keiko_food_reviews
Keiko Food Reviews App
github へ移動してダウンロード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
![](/images/banner-woo.jpg)
関連する JediPixels/keiko_food_reviews 優れたプロジェクトの推薦ダウンロード
AppFlowy
47859
AppFlowy is an open-source alternative to Notion. You are in charge of your data and customizations. Built with Flutter and Rust.
localsend
33797
An open-source cross-platform alternative to AirDrop
spotube
23772
🎧 Open source Spotify client that doesn't require Premium nor uses Electron! Available for both desktop & mobile!
revanced-manager
15035
💊 Application to use ReVanced on Android
gsy_github_app_flutter
14559
Flutter 超完整的开源项目,功能丰富,适合学习和日常使用。GSYGithubApp系列的优势:我们目前已经拥有Flutter、Weex、ReactNative、kotlin 四个版本。 功能齐全,项目框架内技术涉及面广,完成度高,持续维护,配套文章,适合全面学习,对比参考。跨平台的开源Github客户端App,更好的体验,更丰富的功能,旨在更好的日常管理和维护个人Github,提供更好更方便的驾车体验Σ( ̄。 ̄ノ)ノ。同款Weex版本 : https://github.com/CarGuo/GSYGithubAppWeex 、同款React Native版本 : https://github.com/CarGuo/GSYGithubApp 、原生 kotlin 版本 https://github.com/CarGuo/GSYGithubAppKotlin
dio
12249
A powerful HTTP client for Dart and Flutter, which supports global settings, Interceptors, FormData, aborting and canceling a request, files uploading and downloading, requests timeout, custom adapters, etc.
gopeed
11832
A modern download manager that supports all platforms. Built with Golang and Flutter.
bloc
11441
A predictable state management library that helps implement the BLoC design pattern
getx
9899
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
flame
8846
A Flutter based game engine.
flutter_deer
7595
🦌 Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图,更贴近真实项目的练习。Flutter practice project (including integration testing and accessibility testing). Contains complete UI design drawings for a more realistic practice project.
fish-redux
7343
An assembled flutter application framework.
hiddify-next
7232
Multi-platform auto-proxy client, supporting Sing-box, X-ray, TUIC, Hysteria, Reality, Trojan, SSH etc. It’s an open-source, secure and ad-free.
ente
6686
Fully open source, End to End Encrypted alternative to Google Photos and Apple Photos
fl_chart
6451
FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
pixez-flutter
6360
一个支持免代理直连及查看动图的第三方Pixiv flutter客户端
Flutter-Responsive-Admin-Panel-or-Dashboard
6355
Responsive Admin Panel or Dashboard using Flutter
aidea
6021
AIdea 是一款支持 GPT 以及国产大语言模型通义千问、文心一言等,支持 Stable Diffusion 文生图、图生图、 SDXL1.0、超分辨率、图片上色的全能型 APP。
riverpod
5828
A reactive caching and data-binding framework. Riverpod makes working with asynchronous code a breeze.
pikapika
5463
美观易用且无广告的漫画和游戏客户端,同时支持MacOS,Windows,Android,iOS。