Let's explore Flutter with Firebase

A talk on Flutter with Firebase, in which you can find how Flutter is different from others, how to start with Flutter.

Firebase Introduction and implementation of Cloud FireStore with Flutter.

Talk delivered at DevFest Jalandhar 2018
Google Slides with Animation & Gif: https://goo.gl/ZhRCZp

Transcript

1. Dhrumil Shah, Shipmnts & GDG Ahmedabad @dhuma1981 Jalandhar Let’s explore Flutter with Firebase
2. Dhrumil Shah Mobile Developer, @Shipmnts Co-organizer, @GDGAhmedabad Founder, @Flutter_Flakes
3. Let’s start with Jalandhar
5. How Flutter is different?
6. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Technology: OEM SDKs
7. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Technology: WebViews
8. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Flutter React Native Technology: Reactive Views
9. “Everything is Widget”
10. A Widget can be defined as Jalandhar • A structural element ◦ e.g. Button, TextView, Menu • A design element ◦ e.g. Font or Color • A layout element ◦ e.g. Margin or Padding • Or even a business logic
11. Jalandhar The app itself is a Widget
12. Jalandhar The app itself is a Widget
13. Jalandhar The app itself is a Widget
15. “Stateless Widget vs Stateful Widget”
16. Stateless Widget Jalandhar • Dumb Widget • It doesn’t know anything • Gets render only once or • When the parent widget changes the configuration
17. Stateful Widget Jalandhar • Dynamic widget which has its own properties • Those property is know as state of the widget • The state of the widget can be changed by user input, any operation or other widget’s state change. • setState() method is used to change the state. • Each time widget gets rebuild when setState() method gets called.
18. Let’s see it in Action
19. Speaker List App
20. Speaker List App... • Basic Requirement ◦ AppBar ◦ ListView ◦ Text
21. Speaker List App... • Let’s Start
22. Speaker List App... • Add Scaffold with AppBar
23. Speaker List App... • Create Speakers Array
24. Speaker List App... • Create Listview with Speaker’s Name
25. Speaker List App... • Wrap Text with ListTile Widget
26. Speaker List App... • Let’s add claps count in trailing
27. Speaker List App... • Let’s add border using Container & BoxDecoration widget
28. Speaker List App... • Let’s make it circular border
29. Speaker List App... • We need to add some padding. • For that we have Padding widget & we will wrap our Container Widget to Padding Widget
30. Speaker List App :) • Widgets we used ◦ MaterialApp ◦ Scaffold ◦ AppBar ◦ Text ◦ ListView ◦ ListTile ◦ Padding ◦ Container ◦ BoxDecoration ◦ Border ◦ BorderRadius
31. Futter benefits • Easy to understand • Less Time consuming • Code Length: ~50 line of code • And you get iOS app free
33. Wait… This is just static data
35. We need something simple and as fast as Flutter
36. We have Jalandhar
37. Firebase helps you to Jalandhar • “Build” Better Apps • “Improve” app quality • “Grow” your business
38. Firebase - “Build” better apps Jalandhar • Realtime Database ◦ Cloud Firestore (Beta) • Authentication • ML Kit(Beta) • Hosting • Cloud Storage • Cloud Functions
39. Firebase - “Improve” app quality Jalandhar • Crashlytics • Performance Monitoring • Test Lab
40. Firebase - “Grow” your business Jalandhar • Google analytics • Cloud messaging • Dynamic links • Remote config • App indexing • Test Lab • A/B Testing (Beta) • Predictions (Beta)
41. Firebase for Flutter
43. Let’s make our Speaker List app more useful with Firebase
44. Firebase console Jalandhar • Open Firebase console • Create new app • Integrate platform specific code • For Android: Download google-services.json file • For iOS: GoogleService-Info.plist
45. Create Cloud FireStore Database and add data Jalandhar
46. First let’s make code more readable Jalandhar
47. First let’s make code more readable Jalandhar
48. First let’s make code more readable Jalandhar
49. First let’s make code more readable Jalandhar
50. First let’s make code more readable Jalandhar
51. First let’s make code more readable Jalandhar
52. First let’s make code more readable Jalandhar
53. Integration of Cloud FireStore • Open “pubspec.yaml” and add the dependency as shown
54. Cloud Firestore integration Jalandhar OLD CODE
55. Cloud Firestore integration Jalandhar
56. Cloud Firestore integration Jalandhar
57. Cloud Firestore integration Jalandhar
58. Cloud Firestore integration Jalandhar
59. Cloud Firestore integration Jalandhar
60. Now we can read data from Firebase Jalandhar
61. Let’s write data to Firebase Jalandhar
62. And That’s it
63. • We changed maximum 7-9 lines and Firebase Cloud FireStore is integrated :)
64. See you tomorrow to develop app using ;) Jalandhar
66. Dhrumil Shah, Shipmnts & GDG Ahmedabad @dhuma1981 Jalandhar Thank you!