AppBar reusable in different pages and route on different page effect - flutter

Question

I cannot solve two issues with my reusable appbar.
Appbar has not the same width of the page.
Appbar shorter then page width
Text and Icons seems not centered vertically. It looks like the appbar had a border! (if i Move alignment I can seed the border. See picture 2.
see white icon on the right
When I cange page, It seems that an Appbar Is under The reusable Appbar. See picture 3.
Appbar under reusable Appbar
In every page I use this code to call the Appbar:
Widget build(BuildContext context) {
return Scaffold(
//backgroundColor: Colors.white,
appBar: AppBar(
title: ReusableBar(),
),
This is the code of the reusable AppBar:
class ReusableBar extends StatelessWidget implements PreferredSizeWidget{
#override
Widget build(BuildContext context) {
//number = number + displayedText;
return AppBar(
//elevation: 0.0,
centerTitle: true,
automaticallyImplyLeading: false,
titleSpacing: 0.0,
title: Text(getTranslated(context, 'total_click:') + "$_appbarcounter"),
actions: <Widget>[
IconButton(
alignment: Alignment(0.0, -4.0),
icon: Icon(
Icons.save,
color: Colors.white,
),
onPressed: () {
// do something
//TODO AGGIUNGERE FUNZIONE AL PULSANTE SAVE CON PAGINA DI SALVATAGGIO
},
)
],
// leading: GestureDetector(
// onTap: () { /* Write listener code here */ },
// child: Icon(
// Icons.menu, // add custom icons also
// ),
// ),
);
}

Answer 1

If you put your ReusableBar in the title property of AppBar it is wrapping an appbar inside another one. Like you mentionned in your comment you should implement your custom appbar like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: ReusableBar(),
);
}
Doing like this you only declare one appbar, which should solve your issue.