Upload Picture Flutter Firebase Storage #8

You will learn how to take a picture from the camera in Flutter and upload the image to Firebase Storage and setup Firebase Storage emulator.

Flutter is a modern UI toolkit for creating beautiful UI that uses the Skia engine to draw elements to the screen.

Here’s the designer’s website that did this channel’s branding:

Source Code for Episode 8 – Upload Profile Picture with Firebase Storage with MobX

git clone
git fetch origin episode-8
git checkout -b episode-8 origin/episode-8

More episodes from this Series
✅ 1: Flutter Bottom Navigation Bar
✅ 2: Easy Flutter Firebase Firestore
✅ 3: Flutter Mobile Phone Verification UI
✅ 4: Easy Flutter Firebase Phone Number Authentication

✅ 5: User Record Cloud Firebase Firestore

✅ 6: Easy Chat Messages Using Firebase Firestore

✅ 7: Easy Chat Messages Screen Firebase Firestore with MobX

✅ 8: Upload Profile Picture with Firebase Storage with MobX

🔻⬇ Say Hi! ⬇🔻
For our subscribers, we will organize a dedicated event to showcase the Voice & Video Calls in the Chat App, don’t miss it, subscribe now here:

TABLE OF CONTENTS
00:00 Intro
00:48 Specifications
📃 Diagram representation of the app state management as a proxy for firebase services
1:37 Setup Firebase Storage Emulator
📃 Added the storage.rules and added storage emulator properties on firebase.json
📃 Changed pub spec to add dependencies for storage and image picker
📃 Declare the firebase storage emulator on the code
3:48 Add all store listeners on HomePage init
📃 Transform the home page as stateful widget
📃 Move chat screen init listener into HomePage
4:37 Create a User State class
📃 Create a method to sync users data from firebase firestore
📃 Create a method to add/update user info in firebase firestore
📃 Create a method to take a picture from camera and upload it to firebase storage
📃 Generate the public download URL to sync in the user’s firebase firestore records
16:15 Add image picker button
17:33 Demo
20:40 Add profile picture view to persons and chats listview screen
22:26 Demo
24:29 Next Episode
24:40 Announcements
25:28 Collaboration on the chat app repository

👍🏻 if you like
👎🏻 if you don’t like

Give us your feedback in the comments below.

🔻🔻 You might like the following videos: 🔻🔻
✅ Calculator App in Flutter
✅ MacOS Calculator App in Flutter

#firebasestorage #cloudfirestore #flutter #learnflutter #dart #fluttercalculator #flutterdev #dartdev #fluterando #flutterdeveloper #flutterfirebase #firebaseauth

Nguồn: https://ninhbinhtrekkingtours.com/

Xem thêm: https://ninhbinhtrekkingtours.com/category/cong-nghe