AppBar reusable in different pages and route on different page effect


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{
  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>[
          alignment: Alignment(0.0, -4.0),
          icon: Icon(
            color: Colors.white,
          onPressed: () {
            // do something
      // leading: GestureDetector(
      //   onTap: () { /* Write listener code here */ },
      //   child: Icon(
      //,  // add custom icons also
      //   ),
      // ),


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:

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)

Leave a Reply

Your email address will not be published. Required fields are marked *