CODEWITHSUNDEEP
flutter
ParweizH
ParweizH

Reputation: 67

How to center an image in Appbar

I'd like to center an image in appbar (As Twitter does in their mobilapps), but I can't find any logic that does that. I tried to wrap the Container with Center() but it didn't work. 

@override
Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(
    title: Text('Cranes'),
    actions: <Widget>[
      Container(
         //  margin: const EdgeInsets.only(right: 75),
          child: Image.asset(
            'assets/hmf_logo_medium.png',
          ),
        ),

      FlatButton(
        onPressed: () async {
          await Provider.of<FlutterSecureStorage>(context, listen: false)
              .deleteAll();
          Navigator.of(context).pushAndRemoveUntil(
              MaterialPageRoute(builder: (context) => LoginPage()),
              (route) => false);
        },
        child: Text(S.of(context).craneListPageLogoutText,
            style: TextStyle(color: Colors.white)),
      )
    ],
  ),
); }

Upvotes: 2

Views: 8089

Answers (4)

Shailendra Rajput
Shailendra Rajput

Reputation: 2982

in title Property Use your Image. and then make centerTitle:true,

AppBar(
              backgroundColor: kWhite,
              elevation: 0,
              title: Image.asset(kLogoYellow),
              centerTitle: true,
          )

Upvotes: 1

Federick Jonathan
Federick Jonathan

Reputation: 2864

Try this

AppBar(
  leading: Center(
    child: Text('Cranes'),
  ),
  title: Image.asset('assets/hmf_logo_medium.png'),
  centerTitle: true,
)

Upvotes: 5

Sukhi
Sukhi

Reputation: 14215

Following would work :

AppBar(
      title: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
                Text('Cranes'),
                Image.asset(
                  'assets/logo.png',
                  fit: BoxFit.contain,
                  height: 32,
              ),
              Container()
            ],

          ),
  )

Result :

enter image description here

Upvotes: 1

Lunedor
Lunedor

Reputation: 1512

You can wrap your all items with row then mainAxisAlignment.spaceBetween can handle that. 

AppBar(
                        title:
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Text('Cranes'),
                              Container(
                                //  margin: const EdgeInsets.only(right: 75),
                                child: Image.asset(
                                 'assets/hmf_logo_medium.png',
                                ),
                              ),
                              FlatButton(
                                onPressed: () async {},
                                child: Text(S.of(context).craneListPageLogoutText,
        style: TextStyle(color: Colors.white)),
                              )
                            ],
                          ),
                      ),

Upvotes: 1

Related Questions