Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rapid Prototyping with Flutter & Firebase: Building a Social Network by Ahmed Youssef

GDG Montreal
September 29, 2019

Rapid Prototyping with Flutter & Firebase: Building a Social Network by Ahmed Youssef

We are going to talk about the importance of rapid prototyping and how Flutter & Firebase make for a powerful rapid prototyping combo.


GDG Montreal

September 29, 2019

More Decks by GDG Montreal

Other Decks in Programming


  1. Rapid Prototyping with Flutter & Firebase Building a social network

  2. About me - Ahmed Youssef - Mobile Developer at Shopify

    - 6 years Android, 10 years Java - Love to build apps that solve everyday problems
  3. 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
  4. Common Elements Unified Login User Database Publish Content User Interaction

    Push Notifications
  5. Build Test Rapid Prototyping

  6. Local API Storage, database, sync, caching Cloud API Storage, database,

    push notifications Multiplatform Support Android, iOS, Web
  7. Build Test Not So Rapid Prototyping SQLite Storage Cloud API

    Push Notify Login
  8. None
  9. Firebase (April 2012) Realtime database with login, storage, and push

    notifications Flutter (May 2017) Android, iOS, and web support
  10. Flutter Connect: A Social Network built using Flutter and Firebase

  11. Common Elements (revisited) Login using FB, Google, email User Profile

    Publish To Blog Message Users New message notification
  12. pubspec.yaml

  13. Project Structure 13 Files

  14. main.dart

  15. root.dart

  16. home.dart

  17. chat.dart friends.dart blog.dart

  18. post_list.dart

  19. post_item.dart

  20. post_composer.dart

  21. login.dart

  22. Auth.dart

  23. Auth_provider.dart

  24. Flutter Connect Demo

  25. • 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
  26. Gathering resources and dependencies 1 Hour Writing Code 1 Hour

    Extra Steps 1 Hour = 3 Hours Resource Breakdown
  27. Synchronized Friend List Cloud function Push Notifications New message or

    post State Management BLOC pattern Next Steps & Improvements
  28. None
  29. Thank You! - Questions - [email protected] - Github @yucef-ca