How can I use a appear in another widget? - firebase

Question

Im trying to use a appbar widget in another widget so my code is more clear. But the question is how can I do this ?
Heres my app bar widget :
class thisappbar extends StatelessWidget {
thisappbar(this.isMe, this.username, {this.key});
final Key key;
final bool isMe;
String username;
#override
Widget build(BuildContext context) {
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);
},
----------
And heres the way I wanna use it :
class ChatScreen extends StatelessWidget {
static const route = '/messages';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(thisappbar(),
),
body: Container(
child: Column(
children: <Widget>[
Expanded(child: Messages()),
NewMessage(),
],
)),
);
}
}
Hope anyone can help thanks!
This is how my methods look now first the app bar widget after editing some changes from user #Steve Nosse :
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
CustomAppBar({this.key, this.isMe, this.username}) : super(key: key);
final Key key;
final bool isMe;
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 where I use the appbar widget:
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(),
],
)),
);
}
}
And this is the error :
======== Exception caught by widgets library =======================================================
The following assertion was thrown building CustomAppBar(dirty):
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 378 pos 10: 'data != null'
The relevant error-causing widget was:
CustomAppBar file:///Users/name/StudioProjects/project/lib/seitenleiste/nachrichten.dart:390:15
When the exception was thrown, this was the stack:
#2 new Text (package:flutter/src/widgets/text.dart:378:10)
#3 CustomAppBar.build (package:project/seitenleiste/nachrichten.dart:357:23)
#4 StatelessElement.build (package:flutter/src/widgets/framework.dart:4646:28)
#5 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4572:15)
#6 Element.rebuild (package:flutter/src/widgets/framework.dart:4265:5)
...

Answer 1

You can try this:
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
CustomAppBar({this.key, this.isMe, this.username}) : super(key: key);
final Key key;
final bool isMe;
String username;
#override
Widget build(BuildContext context) {
/// Build you AppBar widget here
return Container();
}
#override
Size get preferredSize => Size.fromHeight(56);
}
Your CustomAppBar, as any other class, can by designed to take parameters from the outside to build itself.
The fact that it implements the PreferredSizeWidget allows us to easily use it as a parameter for the appBar attribute of the Scaffold widget.