the image in the appbar is not displayed correctly-CodePudding

I need to insert an image in the appbar, but it is not displayed correctly. I also tried to put it inside a container but to no avail. i also tried but change the boxfit but it didn't work for me. A little help?

AppBar(
            centerTitle: true,
            backgroundColor: coloreApp,
            title: Image.asset(
              "lib/assets/titolo.png",
              fit: BoxFit.cover,
            ),
            actions: [
              IconButton(
                onPressed: () async {
                  await FirebaseAuth.instance.signOut();
                  setState(() {});
                },
                icon: const Icon(Icons.login_rounded),
              ),
            ],
          ),

CodePudding user response：

The default height of Appbar is 56 pixels. So if the default size is not good for you, can set toolbarHeight to specific height. Then You need to set height for you image too, because some how the title of appbar behave like item in stack so if you don't set height for it get out of the appbar area, so if you want for example a 16 pixels padding, I recommended this way:

AppBar(
        centerTitle: true,
        backgroundColor: Colors.cyan,
        title: Image.asset(
          "assets/images/test.jpeg",
          fit: BoxFit.cover,
          height: 56 - 16, //<--- here
        ),
        actions: [
          IconButton(
            onPressed: () async {
              await FirebaseAuth.instance.signOut();
              setState(() {});
            },
            icon: const Icon(Icons.login_rounded),
          ),
        ],
      )

CodePudding user response：

You can use titleSpacing:

AppBar(
    titleSpacing: 140, // change to get best result
    title: Image.asset(
        "lib/assets/titolo.png",
        fit: BoxFit.cover,
    ),
),

You can set toolbarHeight: 200, to change appbar height