How to display phone number in the flutter app - flutter

Question

I'm working on simple chat features in my app. I have used OTP login method to do this application. Firebase Authentication is working well in my application. I have already done the code for the simple chat app but I would like to display the user's phone number when they send chat. Example pic added below for better understanding about the need:
This is my code:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import '../forum/message.dart';
class ForumScreen extends StatefulWidget {
String email;
ForumScreen({required this.email});
#override
_ForumScreenState createState() => _ForumScreenState(email: email);
}
class _ForumScreenState extends State<ForumScreen> {
String email;
_ForumScreenState({required this.email});
final fs = FirebaseFirestore.instance;
final _auth = FirebaseAuth.instance.currentUser;
final TextEditingController message = new TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Farmer's Forum"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.73,
child: messages(
email: email,
),
),
Row(
children: [
Expanded(
child: TextFormField(
controller: message,
decoration: InputDecoration(
filled: true,
fillColor: Colors.lightGreen,
hintText: 'message',
enabled: true,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 8.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: new BorderSide(color: Colors.black),
borderRadius: new BorderRadius.circular(10),
),
enabledBorder: UnderlineInputBorder(
borderSide: new BorderSide(color: Colors.black),
borderRadius: new BorderRadius.circular(10),
),
),
validator: (value) {},
onSaved: (value) {
message.text = value!;
},
),
),
IconButton(
onPressed: () {
if (message.text.isNotEmpty) {
fs.collection('Messages').doc().set({
'message': message.text.trim(),
'time': DateTime.now(),
'email': email,
});
message.clear();
}
},
icon: Icon(Icons.send_sharp),
),
],
),
],
),
),
);
}
}
message.dart
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class messages extends StatefulWidget {
String email;
messages({required this.email});
#override
_messagesState createState() => _messagesState(email: email);
}
class _messagesState extends State<messages> {
String email;
_messagesState({required this.email});
Stream<QuerySnapshot> _messageStream = FirebaseFirestore.instance
.collection('Messages')
.orderBy('time')
.snapshots();
#override
Widget build(BuildContext context) {
return StreamBuilder(
stream: _messageStream,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text("something is wrong");
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
itemCount: snapshot.data!.docs.length,
physics: ScrollPhysics(),
shrinkWrap: true,
primary: true,
itemBuilder: (_, index) {
QueryDocumentSnapshot qs = snapshot.data!.docs[index];
Timestamp t = qs['time'];
DateTime d = t.toDate();
print(d.toString());
return Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8),
child: Column(
crossAxisAlignment: email == qs['email']
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
SizedBox(
width: 300,
child: ListTile(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.green,
),
borderRadius: BorderRadius.circular(10),
),
title: Text(
qs['email'],
style: TextStyle(
fontSize: 15,
),
),
subtitle: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 200,
child: Text(
qs['message'],
softWrap: true,
style: TextStyle(
fontSize: 15,
),
),
),
Text(
d.hour.toString() + ":" + d.minute.toString(),
)
],
),
),
),
],
),
);
},
);
},
);
}
}
How should I read the phone number? I'm not sure how do we related both firebase authentication and cloud firestore.

Answer 1

If you have the information of the phone number you have to provide it to messages(email)
Also Widget names (like all class names) should begin with an uppercase
Something like:
class Messages extends StatefulWidget {
String email;
Messages({required this.email});
#override
_MessagesState createState() => _MessagesState(email: email);
}
class _MessagesState extends State<Messages> {
String email;
_MessagesState({required this.email});
Stream<QuerySnapshot> _messageStream = FirebaseFirestore.instance
.collection('Messages')
.orderBy('time')
.snapshots();
#override
Widget build(BuildContext context) {
return StreamBuilder(
stream: _messageStream,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text("something is wrong");
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
itemCount: snapshot.data!.docs.length,
physics: ScrollPhysics(),
shrinkWrap: true,
primary: true,
itemBuilder: (_, index) {
QueryDocumentSnapshot qs = snapshot.data!.docs[index];
DateTime time = qs['time'].toDate();
String message = qs['message'];
String messageEmail = qs['email'];
String messagePhoneNumber = qs['phoneNumber'];
return Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8),
child: Column(
crossAxisAlignment: email == messageEmail
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
SizedBox(
width: 300,
child: ListTile(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.green,
),
borderRadius: BorderRadius.circular(10),
),
title: Text(
messageEmail == email ? email : messagePhoneNumber,
style: TextStyle(
fontSize: 15,
),
),
subtitle: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 200,
child: Text(
message,
softWrap: true,
style: TextStyle(
fontSize: 15,
),
),
),
Text(
time.hour.toString() + ":" + time.minute.toString(),
)
],
),
),
),
],
),
);
},
);
},
);
}
}
As I said, it depends on your provided data if there is a phoneNumber