title: How can I show the user name of the other user?
body: <p>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 :</p>
  <pre><code>
  
  
  
  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: &lt;Widget&gt;[
            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: &lt;Widget&gt;[
                      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,
                      ),
                    ]))
          ]);
    }
  }
  </code></pre>
  <p>It displayed the correct username and the correct user message .</p>
  <p>And heres how I wanna use it in the app bar:</p>
  <pre><code>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: &lt;Widget&gt;[
                  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: &lt;Widget&gt;[
                        Text(
                          username, style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w600),),
                        SizedBox(height: 6,),
                        Text(&quot;Online&quot;, style: TextStyle(
                            color: Colors.grey.shade600, fontSize: 13),),
                      ],
                    ),
                  ),
                  Icon(Icons.settings, color: Colors.black54,),
                ],
              ),
            ),
          ),
        ),
      );
    }
    @override
    Size get preferredSize =&gt; Size.fromHeight(56);
  }
  
  </code></pre>
  <p>And heres I wanna displayed it :</p>
  <pre><code>
  class ChatScreen extends StatelessWidget {
  
    static const route = '/messages';
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar:CustomAppBar()
        ,
        body: Container(
            child: Column(
          children: &lt;Widget&gt;[
            Expanded(child: Messages()),
            NewMessage(),
          ],
        ),
        ),
      );
    }
  }
  </code></pre>