Rapid Prototyping with
Flutter & Firebase
Building a social network
Slide 2
Slide 2 text
About me
- Ahmed Youssef
- Mobile Developer at Shopify
- 6 years Android, 10 years Java
- Love to build apps that solve everyday problems
Slide 3
Slide 3 text
Smart Home Controller
Integrate home controls with
media center
Walkie Talkie
Push-To-Talk chat
Hub for gamers
Platform for gamers to network
and hang out with players in
different time zones
Slide 4
Slide 4 text
Common
Elements
Unified Login
User Database
Publish Content
User Interaction
Push Notifications
Slide 5
Slide 5 text
Build Test
Rapid Prototyping
Slide 6
Slide 6 text
Local API
Storage, database, sync, caching
Cloud API
Storage, database, push
notifications
Multiplatform Support
Android, iOS, Web
Slide 7
Slide 7 text
Build Test
Not So Rapid Prototyping
SQLite
Storage
Cloud
API
Push
Notify
Login
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Firebase (April 2012)
Realtime database with login,
storage, and push notifications
Flutter (May 2017)
Android, iOS, and web support
Slide 10
Slide 10 text
Flutter Connect: A Social Network built using
Flutter and Firebase
Slide 11
Slide 11 text
Common
Elements
(revisited)
Login using FB, Google,
email
User Profile
Publish To Blog
Message Users
New message notification
Slide 12
Slide 12 text
pubspec.yaml
Slide 13
Slide 13 text
Project Structure
13 Files
Slide 14
Slide 14 text
main.dart
Slide 15
Slide 15 text
root.dart
Slide 16
Slide 16 text
home.dart
Slide 17
Slide 17 text
chat.dart
friends.dart
blog.dart
Slide 18
Slide 18 text
post_list.dart
Slide 19
Slide 19 text
post_item.dart
Slide 20
Slide 20 text
post_composer.dart
Slide 21
Slide 21 text
login.dart
Slide 22
Slide 22 text
Auth.dart
Slide 23
Slide 23 text
Auth_provider.dart
Slide 24
Slide 24 text
Flutter Connect
Demo
Slide 25
Slide 25 text
● Create project on Firebase
● Add creds files to Android and iOS
versions
● Create Facebook App with Facebook
Login product
● Add and apply Google Services plugin
to Android (using gradle)
● Add Facebook meta-data and
activities in Android manifest
● Add Facebook meta-data to info.plist
in XCode
● Make Android app multi-dex (using
gradle)
● Add and configure sign in methods in
Firebase
● Add URL Scheme to info.plist for
Google sign-in
Extra Steps
Slide 26
Slide 26 text
Gathering resources and
dependencies
1 Hour
Writing Code
1 Hour
Extra Steps
1 Hour
= 3 Hours
Resource Breakdown
Slide 27
Slide 27 text
Synchronized Friend List
Cloud function
Push Notifications
New message or post
State Management
BLOC pattern
Next Steps &
Improvements