How can I show the user name of the other user? - firebase

Question

I have a app and in that a chat function were chat working correctly and user name correctly diplayed. But now im trying to add a appBar and im getting an error. What I want is trying to build the name of the other user and not mine . So an example: I chat with my friend and in the app bar I wanna see his name so I know with how Im chatting . but how do I do that?. Heres how my chat app locks at the moment.
So heres how I use the username in chat bubble and it works fine :
class MessageBubble extends StatelessWidget {
MessageBubble(this.message, this.isMe, this.username, {this.key});
final Key key;
final String message;
final bool isMe;
String username;
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: isMe ? Colors.grey[300] : Colors.black,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
bottomLeft:
!isMe ? Radius.circular(0) : Radius.circular(12),
bottomRight:
isMe ? Radius.circular(0) : Radius.circular(12),
)),
width: 140,
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 16),
margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
child: Column(
crossAxisAlignment:
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: <Widget>[
Text(
username,
style: TextStyle(
color: isMe
? Colors.black
: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
message,
style: TextStyle(
color: isMe
? Colors.black
: Colors.white),
textAlign: isMe ? TextAlign.end : TextAlign.start,
),
]))
]);
}
}
It displayed the correct username and the correct user message .
And heres how I wanna use it in the app bar:
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
CustomAppBar({this.key, this.username,this.isMe} ) : super(key: key);
final Key key;
final bool isMe;
final String username;
//String username;
#override
Widget build(BuildContext context) {
/// Build you AppBar widget here
return Scaffold(
appBar: AppBar(
elevation: 0,
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
flexibleSpace: SafeArea(
child: Container(
padding: EdgeInsets.only(right: 16),
child: Row(
children: <Widget>[
IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back, color: Colors.black,),
),
SizedBox(width: 2,),
CircleAvatar(
backgroundImage: NetworkImage(
'https://randomuser.me/api/portraits/men/5.jpg'),
maxRadius: 20,
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
username, style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w600),),
SizedBox(height: 6,),
Text("Online", style: TextStyle(
color: Colors.grey.shade600, fontSize: 13),),
],
),
),
Icon(Icons.settings, color: Colors.black54,),
],
),
),
),
),
);
}
#override
Size get preferredSize => Size.fromHeight(56);
}
And heres I wanna displayed it :
class ChatScreen extends StatelessWidget {
static const route = '/messages';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar:CustomAppBar()
,
body: Container(
child: Column(
children: <Widget>[
Expanded(child: Messages()),
NewMessage(),
],
),
),
);
}
}

Answer 1

I think you need to pass the username as String (and other parameters) in the CustomAppBar constructor like this:
class ChatScreen extends StatelessWidget {
static const route = '/messages';
final String username;
ChatScreen({#required this.username});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppBar(
username: username, // This is dynamic..
isMe: true,
),
body: Container(
child: Column(
children: <Widget>[
Expanded(child: Messages()),
NewMessage(),
],
),
),
);
}
}
EDIT
You need to get first the username of the other user and then you can create your ChatScreen:
//...some code...
String username = getUsername(); // This is your method to get the username
Navigator.of(context).push(MaterialPageRoute(builder: (context) => ChatScreen(username: username)));

Answer 2

In your code, when you are calling CustomAppBar() you are not passing any info/strings to it, that's causing your null error regarding a null string.
It should be i.e CustomAppBar (userName).