Display image from Firebase Firestore with Flutter referring to current user - firebase

I am trying to display images from Firebase Firestore referring to the current user.
Here is the part of my code where I create the functions to open the gallery, upload it to Firestorage and Firestore:
File _image;
final ImagePicker _picker = ImagePicker();
Future getImage(bool gallery) async {
ImagePicker picker = ImagePicker();
PickedFile pickedFile;
// Let user select photo from gallery
if (gallery) {
pickedFile = await picker.getImage(
source: ImageSource.gallery,
);
}
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path); // Use if you only need a single picture
} else {
print('No image selected.');
}
});
}
Future<String> uploadFile(File image) async {
String downloadURL;
Reference ref = FirebaseStorage.instance
.ref()
.child("images/${_firebaseAuth.currentUser.uid}");
await ref.putFile(image);
downloadURL = await ref.getDownloadURL();
return downloadURL;
}
Future uploadToFirebase() async {
final CollectionReference users =
_firebaseFirestore.collection("Companies");
final String uid = _firebaseAuth.currentUser.uid;
String url = await uploadFile(
_image); // this will upload the file and store url in the variable 'url'
await users.doc(uid).update({
//use update to update the doc fields.
'url': url
});
final result = await users.doc(uid).get();
return result.data()["url"];
}
Now, here is the code where I am trying to display the image:
Row(
children: [
Text(
"Company profile picture: ",
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
),
],
),
SizedBox(
height: 20.0,
),
Container(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: IconButton(
icon: Icon(Icons.camera_alt),
onPressed: () async {
getImage(true);
},
),
),
Container(
child: _image != null
? Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(50),
image: DecorationImage(
image: FileImage(
_image), // Here needs to be the image from Firestore referring to the current user
),
),
)
: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius:
BorderRadius.circular(50),
),
width: 100,
height: 100,
child: Icon(
Icons.camera_alt,
color: Colors.grey[800],
),
),
),
],
),
),
Row(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black,
),
child: Text(
"Submit",
style: TextStyle(color: Colors.white),
),
onPressed: () async {
uploadFile(_image);
uploadToFirebase();
},
),
],
),
As you can see, this part here:
Container(
child: _image != null
? Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(50),
image: DecorationImage(
image: FileImage(
_image), // Here needs to be the image from Firestore referring to the current user
),
),
)
Is where I want to add the Image from the Firestore referring to the current user. The way it is now, using image: FileImage(_image), just show the image hen the user select it, but when he closes the app, or logout, when the user log in again, the image is gone, it is like, setting to null, so I am struggling to find a good tutorial on how to display the image from Firestore even after logging out and in again.

Related

(Flutter) How to retrieve Firebase Storage images in a Streambuilder with the paths stored in Firestore

In my code, I have a streambuilder that returns items from Firestore using the geoflutterfire package to load items that are within a radius of the user.
These items are loaded, along with the food title, allergies, and age which are retrieved from Firestore. Along with the mentioned fields, there is also an imagePath field.
The image path is a subItem in the test folder in Firebase Storage:
Right now, there is a placeholder image, the image of the MacBook, over the spot where I want my image to be. Since the query loads the image path along with the name, allergies, etc, is it possible to show an image given its image path inside of a streambuilder? Here is the code for the query and streambuilder.
Query:
var collectionReference = FirebaseFirestore.instance.collection('requests');
double radius = 1000;
String field = 'position';
Stream<List<DocumentSnapshot>> stream = geo.collection(collectionRef: collectionReference)
.within(center: center, radius: radius, field: field);
Streambuilder: (Scroll to //CODE OF PLACEHOLDER IMAGE to find placeholder image)
StreamBuilder(
stream: stream,
builder: (BuildContext context,
AsyncSnapshot<List<DocumentSnapshot>> snapshots) {
if (snapshots.connectionState == ConnectionState.active &&
snapshots.hasData) {
return ListView(
physics: const BouncingScrollPhysics(),
children: snapshots.data!.map(
(DocumentSnapshot document) {
Map<String, dynamic> data =
document.data()! as Map<String, dynamic>;
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: const Color(0xff303434),
),
child: Row(
children: [
//CODE OF PLACEHOLDER IMAGE
Padding(
padding: const EdgeInsets.all(15.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(40.0),
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.fill,
width: 150,
height: 150,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 140,
),
child: AutoSizeText(
data['foodCategory'].toString(),
maxLines: 1,
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w900,
),
),
),
const SizedBox(
height: 5,
),
ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 70.0,
maxWidth: 140,
),
child: AutoSizeText(
data['allergens'],
minFontSize: 10,
maxFontSize: 25,
style: GoogleFonts.poppins(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
),
const SizedBox(
height: 5,
),
AutoSizeText(
data['ageNum'].toString() +
' ' +
data['ageUnit'].toString(),
maxLines: 1,
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
],
),
],
),
);
},
).toList(),
);
} else {
return const Center(child: CircularProgressIndicator());
}
},
),
Your image url are wrong.
You should get image url after upload image to Firestore
Example below code:
var file = _imageFile;
FirebaseStorage firebaseStorage = FirebaseStorage.instance;
Reference ref = firebaseStorage.ref(
'uploads-images/${user.userId}/images/${DateTime.now().microsecondsSinceEpoch}');
TaskSnapshot uploadedFile = await ref.putFile(file);
if (uploadedFile.state == TaskState.success) {
downloadUrl = await ref.getDownloadURL();
}
And iamgePath is downloadUrl
Check your rule on Firestore if you don't want to authenticate Firestore

Is there a way to compare two list and check for the value that are the same

I am create a social media type app I want to create a follower and following list like Instagram, I want when I go on some else profile and click on their followers or following list it shows a list of all the users that is following that person and if I am also following someone in the list it give me the option to unfollow that person and if I am not following the same person it gives me the option to follow them.
The code below is what I was to check if I am following any one in profile user followers list, What I have done is I query the data from firestore of all the user id the I am following and the same for user profile that is currently open and store the list in two separate variable and what it should do is check both list and if a user Id is in both list it means I am also following that user and should show that I am following that user and give the option to unfollow but what happens is instead of showing that I am only following the user who's id is in both list it show that I am following every one.
checkfollowers(BuildContext context, String? id) async {
final auth = Provider.of<AuthState>(context, listen: false);
List<String> followingList = [];
List<String> myFollowingList = [];
try {
final QuerySnapshot following = await _firestore
.collection('following')
.doc(auth.getCurrentUser.uid)
.collection('userFollowing')
.get();
QuerySnapshot userfollowing = await _firestore
.collection('followers')
.doc(id)
.collection('userFollowers')
.get();
following.docs.forEach((element) {
myFollowingList.add(element.id);
});
userfollowing.docs.forEach((element) {
followingList.add(element.id);
});
// followingList.where((item) => myFollowingList.contains(item));
check(value) => myFollowingList.contains(value);
isFollowedByMe = followingList.any(check);
notifyListeners();
print(followingList);
print(myFollowingList);
} catch (err) {
print(err.toString() + 'this error is coming from profileState');
}
}
below code is how I build the follower/following list
final FirebaseFirestore _firestore = FirebaseFirestore.instance;
UserModel? users;
#override
void initState() {
final profileState = Provider.of<ProfileState>(context, listen: false);
profileState.checkfollowers(context, widget.proFileId);
super.initState();
}
userComponent(UserModel? model, BuildContext context) {
final profileState = Provider.of<ProfileState>(context);
final auth = Provider.of<AuthState>(context);
return Container(
margin: EdgeInsets.symmetric(horizontal: 10),
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
ProfilePage(profileId: '${model?.userId}'),
),
);
},
child: Row(
children: [
Container(
width: 60,
height: 60,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage('${model?.profilePic}'),
),
),
SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('${model?.userName}',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.w500)),
SizedBox(
height: 5,
),
Text(
'${model?.displayName}',
style: TextStyle(
color: Colors.grey[500],
),
),
],
)
],
),
),
auth.getCurrentUser.uid == model?.userId
? Container()
: GestureDetector(
onTap: () {
if (auth.getCurrentUser.uid == model?.userId) {
print('you can not follow your self');
} else if (profileState.isFollowedByMe == true) {
profileState.setIsFollowedByMeToFalse();
profileState.handleUnFollow(context, model?.userId);
} else if (profileState.isFollowedByMe == false) {
profileState.setIsFollowedByMeToTrue();
profileState.handleFollow(context, model?.userId);
}
},
child: AnimatedContainer(
height: 35,
width: 110,
duration: Duration(milliseconds: 300),
decoration: BoxDecoration(
color: profileState.isFollowedByMe == true
? AppColors.white
: AppColors.pinkaccent,
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: Colors.grey.shade700,
),
),
child: Center(
child: Text(
profileState.isFollowedByMe == true
? 'UnFollow'
: 'Follow',
style: TextStyle(
color: profileState.isFollowedByMe == true
? Colors.black
: Colors.white),
),
),
),
)
],
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: Container(
height: 38,
child: TextField(
onChanged: (value) {},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.all(0),
prefixIcon: Icon(
Icons.search,
color: Colors.grey.shade500,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: BorderSide.none),
hintStyle: TextStyle(fontSize: 14, color: Colors.grey.shade500),
hintText: "Search users"),
),
),
),
body: StreamListWrapper(
stream: _firestore
.collection('followers')
.doc(widget.proFileId)
.collection('userFollowers')
.snapshots(),
itemBuilder: (context, DocumentSnapshot snapshot) {
var data = snapshot.data() as Map<String, dynamic>;
users = UserModel.fromJson(data);
return userComponent(users, context);
},
text: '${widget.user?.userName} as no Followers',
),
);
It would be simpler (and more performant) to use the Set data structure rather than List. The intersection method on Set returns the items contained in both sets.
for example:
void main() {
Set<String> followingSet = {'Jeff', 'Mike', 'Joe', 'Jess'};
Set<String> myFollowingSet = {'Jess', 'Matt', 'Mike', 'Frank'};
Set<String> usersInBothSets = followingSet.intersection(myFollowingSet);
print(usersInBothSets); // {Mike, Jess}
}

How to display image automatically when it's picked (flutter)

when I upload an Image using firebase storage, it doesn't show in the screen until I do hot refresh. So the question is: How to show it automatically when I pick it either from the gallery or the camera? Thanks.
Codes:
late File file;
var imagePicker = ImagePicker();
var imgUrl;
var refStorage;
uploadPosterImage() async {
var pickedImage = await imagePicker.getImage(source: ImageSource.gallery);
if (pickedImage != null) {
setState(() {
file = File(pickedImage.path);
});
var imageName = basename(pickedImage.path);
var rand = Random().nextInt(10000000);
imageName = "$rand$imageName"; // random number + image name
refStorage = FirebaseStorage.instance.ref("items/$imageName");
await refStorage.putFile(file);
imgUrl = await refStorage.getDownloadURL();
}
}
------- and that's the code in the body:
Container(
margin: EdgeInsets.only(bottom: 10),
height: 230,
width: 160,
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
borderRadius: BorderRadius.circular(20)),
child:
//imgUrl==null?
InkWell(
onTap: ()async{
await uploadPosterImage();
},
child: imgUrl == null? _icon : Image(image: NetworkImage(imgUrl),) )
),
Try below code hope its help to you.
File? imagePicked;
void cameraImage() async {
final picker = ImagePicker();
final pickedImage = await picker.pickImage(
source: ImageSource.camera,
);
final pickedImageFile = File(pickedImage!.path);
setState(() {
imagePicked = pickedImageFile;
});
Navigator.pop(context);
}
void gallaryImage() async {
final picker = ImagePicker();
final pickedImage = await picker.pickImage(
source: ImageSource.gallery,
);
final pickedImageFile = File(pickedImage!.path);
setState(() {
imagePicked = pickedImageFile;
});
Navigator.pop(context);
}
Your Widget:
Stack(
children: [
Container(
margin: EdgeInsets.all(8),
child: CircleAvatar(
radius: 71,
backgroundColor: Colors.black,
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 69,
backgroundImage: imagePicked == null
? null
: FileImage(
imagePicked!,
),
),
),
),
Positioned(
left: 90,
top: 90,
child: RawMaterialButton(
fillColor: Theme.of(context).backgroundColor,
padding: EdgeInsets.all(10),
shape: CircleBorder(),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text(
'Choose Option',
),
content: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextButton.icon(
onPressed: cameraImage,
label: Text(
'Camera',
style: TextStyle(
color: Colors.black,
),
),
icon: Icon(
Icons.camera,
),
),
TextButton.icon(
onPressed: gallaryImage,
label: Text(
'Gallery',
style: TextStyle(
color: Colors.black,
),
),
icon: Icon(Icons.image),
),
],
),
),
);
},
);
},
child: Icon(
Icons.add_a_photo,
),
),
),
],
),
Your screen before image select:
Your screen after image select:

How to Send Images in chat

I'm working on a chat room and I want to enable users send photos in chat. But I don't seem to be getting a hang of it.
I have the image picker widget, but I'm still yet to implement it cos I can't get a hang of it.
Here is the code to the chat screen and a photo as well. I have initialised Firebase properly and everything is working fine, messages are sending, and all. But I want to implement a message send feature into the project.
import 'package:chat/constants.dart';
import 'package:chat/utilities/constants.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:chat/models/auth.dart';
import 'package:chat/models/message.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class ChatScreen extends StatefulWidget {
final AuthImplementation auth;
final VoidCallback signedOut;
ChatScreen({
this.auth,
this.signedOut,
});
#override
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final Firestore _firestore = Firestore.instance;
TextEditingController messageController = TextEditingController();
ScrollController scrollController = ScrollController();
String userName;
#override
void initState() {
super.initState();
widget.auth.getCurrentUserEmail().then((email) {
setState(() {
final String userEmail = email;
final endIndex = userEmail.indexOf("#");
userName = userEmail.substring(0, endIndex);
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: new Container(
padding: new EdgeInsets.all(8.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/social-logo.png"),
fit: BoxFit.fill),
color: Colors.white,
borderRadius: new BorderRadius.all(new Radius.circular(80.0)),
border: new Border.all(
color: Colors.white,
width: 1.0,
),
),
),
title: Text("One Gov FX Signal Room",
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Spartan',
)),
backgroundColor: kPrimaryColor,
actions: <Widget>[
IconButton(
icon: FaIcon(FontAwesomeIcons.signOutAlt),
color: Colors.white,
onPressed: logOut),
],
),
backgroundColor: antiFlashWhite,
body: Column(
children: <Widget>[
Container(
color: Colors.white,
padding: EdgeInsets.only(left: 10, right: 0, bottom: 10, top: 10),
child: Row(
children: [
CircleAvatar(
backgroundColor: Colors.white,
backgroundImage: AssetImage("assets/images/social-logo.png"),
),
SizedBox(
width: 50,
),
Flexible(
child: Column(children: const <Widget>[
Text('Message From the Admins'),
Text(
'Keep your messages polite and do not abuse the channel. Try to keep your discussions within the community guidelines'),
]),
)
],
),
),
Expanded(
child: Container(
//margin: EdgeInsets.symmetric(horizontal: 5),
child: StreamBuilder<QuerySnapshot>(
stream: _firestore
.collection("messages")
.orderBy(
"timestamp",
)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData)
return Center(
child: CircularProgressIndicator(
backgroundColor: kPrimaryColor,
),
);
List<DocumentSnapshot> docs = snapshot.data.documents;
List<Widget> messages = docs
.map((doc) => Message(
user: doc.data['user'],
text: doc.data['text'],
timestamp: doc.data['timestamp'],
mine: userName == doc.data['user'],
))
.toList();
return ListView(
controller: scrollController,
children: messages,
);
}),
),
),
Container(
color: Colors.white,
child: Row(
children: <Widget>[
IconButton(
icon: FaIcon(
FontAwesomeIcons.image,
color: kPrimaryColor,
),
onPressed: sendChat,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(10),
child: TextField(
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 15,
),
onSubmitted: (value) => sendChat(),
controller: messageController,
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.newline,
maxLines: null,
cursorColor: kPrimaryColor,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20)),
filled: true,
hintText: "Say Something. Be Nice...",
hintStyle:
TextStyle(fontFamily: 'Montserrat', fontSize: 12),
),
),
),
),
IconButton(
icon: FaIcon(
FontAwesomeIcons.paperPlane,
color: kPrimaryColor,
),
onPressed: sendChat,
),
],
),
),
],
),
);
}
void logOut() async {
try {
await widget.auth.signOut();
widget.signedOut();
} catch (e) {
print("error :" + e.toString());
}
}
Future<void> sendChat() async {
if (messageController.text.length > 0) {
await _firestore.collection("messages").add({
'user': userName,
'text': messageController.text,
'timestamp': FieldValue.serverTimestamp(),
});
messageController.clear();
scrollController.animateTo(scrollController.position.maxScrollExtent,
duration: Duration(milliseconds: 300), curve: Curves.easeOut);
}
}
}
Screenshot of the chat screen:
To send images in a chat, you need a place to host those images. One way of doing this is by using file hosting services like Firebase Cloud Storage. This boils down to these steps.
Upload images on Cloud Storage. The image paths from the
device's local storage can be fetched using image_picker
Store the Cloud Storage path of the uploaded image i.e. using Cloud
Firestore
Display the image from the Cloud Storage path using Image.network()

Add image from gallery to user document id using Flutter and Firebase

I am developing an app, and I want to create a user profile for each logged-in user. With my code now, I am able to get the user information from the cloud Firestore of each user uid document, but I want the user to be able to add an image to firebase storage, and then get this image, add to the specific user uid doc, and display on the app. Basically, I know how to get the data I have already, I just don't know how to update the user doc, especially with images.
Here is the code I have for the user profile:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:tradie_app/scr/providers/authService.dart';
import 'package:tradie_app/scr/screens/edit_company_email.dart';
import 'package:tradie_app/scr/widgets/loading.dart';
import 'home.dart';
class CompanyProfile extends StatefulWidget {
#override
_CompanyProfileState createState() => _CompanyProfileState();
}
class _CompanyProfileState extends State<CompanyProfile> {
// Keep track of the form for validation
final _formKey = GlobalKey<FormState>();
// Loading Icon
bool loading = false;
final AuthService _authService = AuthService();
final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
final FirebaseFirestore _firebaseFirestore = FirebaseFirestore.instance;
Future getCompanyNameData() async {
final CollectionReference users =
_firebaseFirestore.collection("Companies");
final String uid = _firebaseAuth.currentUser.uid;
final result = await users.doc(uid).get();
return result.data()["companyName"];
}
Future getCompanyEmailData() async {
final CollectionReference users =
_firebaseFirestore.collection("Companies");
final String uid = _firebaseAuth.currentUser.uid;
final result = await users.doc(uid).get();
return result.data()["companyEmail"];
}
#override
Widget build(BuildContext context) {
return loading
? Loading()
: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.black),
backgroundColor: Colors.white,
title: Text(
"Create the company profile",
style: TextStyle(
color: Colors.black,
),
),
elevation: 0.0,
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: FutureBuilder(
future: getCompanyNameData(),
builder: (_, AsyncSnapshot snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return Text("Loading");
}
return Text(snapshot.data);
},
),
),
ListTile(
leading: Icon(Icons.logout),
title: Text(
"Log Out",
),
onTap: () async {
await _authService.signOut();
},
),
],
),
),
body: Padding(
padding: const EdgeInsets.all(18.0),
child: SingleChildScrollView(
child: Container(
child: Form(
key: _formKey,
child: Column(
children: [
Row(
children: [
Text(
"Company name: ",
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
),
],
),
SizedBox(
height: 10.0,
),
Row(
children: [
FutureBuilder(
future: getCompanyNameData(),
builder: (_, AsyncSnapshot snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return Text("Loading");
}
return Text(
snapshot.data,
style: TextStyle(
color: Colors.black, fontSize: 15.0),
);
},
),
],
),
SizedBox(
height: 20.0,
),
Row(
children: [
Text(
"Company email: ",
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
),
],
),
SizedBox(
height: 10.0,
),
Row(
children: [
FutureBuilder(
future: getCompanyEmailData(),
builder: (_, AsyncSnapshot snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return Text("Loading");
}
return Text(
snapshot.data,
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
),
);
},
),
IconButton(
icon: Icon(Icons.edit),
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
EditCompanyEmailScreen(),
),
),
),
],
),
SizedBox(
height: 20.0,
),
Row(
children: [
Text(
"Company phone number: ",
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
),
],
),
SizedBox(
height: 20.0,
),
// Here is where I want to add the image
Row(
children: <Widget>[],
),
],
),
),
),
),
),
);
}
}
To select the image from gallery add this plugin. And then call this function to select the image.
File _image;
selectImageFromGallery() async
{
final picker=ImagePicker();
setState(() {
inProcess=true;
});
final imageFile= await picker.getImage(source: ImageSource.gallery);
if(imageFile!=null)
{
_image=File(imageFile.path);
}
setState(() {
inProcess=false;
});
}
after selecting the image run this function to store image to firebase and get url of the image.
Future<String> uploadFile(File image) async
{
String downloadURL;
String postId=DateTime.now().millisecondsSinceEpoch.toString();
Reference ref = FirebaseStorage.instance.ref().child("images").child("post_$postId.jpg");
await ref.putFile(image);
downloadURL = await ref.getDownloadURL();
return downloadURL;
}
now lets upload and update data in firestore docs and storage.
uploadToFirebase()async
{
String url=await uploadFile(_image); // this will upload the file and store url in the variable 'url'
await users.doc(uid).update({ //use update to update the doc fields.
'url':url
});
}
To show the selected image add this in your Ui:-
Container(
height: 200,
width: 200,
decoration: BoxDecoration(image: DecorationImage(image: FileImage(_image,),fit: BoxFit.contain)),
)
After adding this image make a button for upload:-
RaisedButton()
{
onPressed:(){
uploadToFirebase();
},
child:Text("Upload"),
}
After selecting the image user will click on this button to upload and save sata to firebase.
You need to upload the image chosen from gallery to your firebase storage and then use the url in your firestore.
here is a samle code to upload the image to storage
import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;
final ref = firebase_storage.FirebaseStorage.instance.ref().child("profile-pic/abc.jpg");
final imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
final uploadTask = ref.putFile(imageFile);
final snapshot = await uploadTask.whenComplete(() => null);
imageUrl = await snapshot.ref.getDownloadURL();
use the imageUrl and update it in your firestore collection for the user.
You can fetch the url and display image whenever you need.

Resources