AppBar reusable in different pages and route on different page effect

Issue

I cannot solve two issues with my reusable appbar.

1. Appbar has not the same width of the page.
   Appbar shorter then page width
2. 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
3. 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
      //   ),
      // ),
    );
  }

Solution

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.

Answered By – Guillaume Roux

Answer Checked By – Cary Denson (FlutterFixes Admin)