I want to show a logo on app bar and am achieving it through the following code.

 appBar: AppBar(
      backgroundColor: Colors.white,
      elevation: 3,
      title: Align(
        alignment: Alignment.centerLeft,
        child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Align(
                alignment: Alignment.centerLeft,
                child: Image.asset(
                  'assets/logo/logo.jpg',
                  fit: BoxFit.fitWidth,
                  height: MediaQuery.of(context).size.height * 0.3,
                  width: MediaQuery.of(context).size.width * 0.2,
                ),
              ),
            ]),
      )),

Output am getting

The problem here is The icon is centered how can I stick to the right like this

Desired Output

As in the above code I already tried

 alignment: Alignment.centerLeft,

crossAxisAlignment: CrossAxisAlignment.start,

Still not working anyone have any idea? Please support.

CodePudding user response：

It looks like that you are almost there with your code. Here is the snippet that'll place your logo in left inside appbar.

AppBar(
      backgroundColor: Colors.white,
      elevation: 3,
      title: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Image.asset(
              'assets/nividata-logo.png',
              fit: BoxFit.fitWidth,
              height: MediaQuery.of(context).size.height * 0.3,
              width: MediaQuery.of(context).size.width * 0.2,
            ),
          ])),

Okay, as you can see I've just used row and gave mainAxisAlignment to start, so that'll place every element inside row from start.

If I change this to below code, then It'll start placing elements from right side (end).

mainAxisAlignment: MainAxisAlignment.end,

You can also check below screenshots for results that I'm getting with above code.

CodePudding user response：

Try below code hope its help to you. just change your widgets inside action tag(like your image)

Scaffold(
  appBar: AppBar(
    title:Image.network(
      'https://image.shutterstock.com/image-photo/kiev-ukraine-may-03-2015-260nw-275974145.jpg',
    ),
    automaticallyImplyLeading:false,
    actions: <Widget>[
      Icon(Icons.add),
      Icon(Icons.person),
    ],
  ),
)

Your Result Screen->

CodePudding user response：

This is simply because of the Default Leading applied to The app bar as you navigate from the other page and somehow that leading icon is in white color.

If you enable the Show Boundaries in the Dev tools you can see the Default leading icon is taking that blank spot.

There are two possible outcomes to this problem.

You can change the color to any visible color.

- This will help the user to navigate back.

You can try to set the "automaticallyImplyLeading" property to "false" in the "Appbar" Widget.

- This will disable the default leading icon in the Appbar.

CodePudding user response：

Yes, got the answer from one of the comment. automaticallyImplyLeading:false. This fixed the issue