How to make some icons at Appbar with different alignment?

Question

I faced some problem. I want make an image, a text and two icons in AppBar but I can't make it work as I want.

I tried to make some fonts in a row after the images and text. The images and the text successful show in my AppBar, but the rest of 2 fonts (Trolley and notifications) show some error.

Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.amber,  
      appBar: new AppBar
        (
        title: new Row
          (
          mainAxisAlignment: MainAxisAlignment.start,
            children:
            [
              Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), 
              Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop'))
            ],
          )

        ),

....

You can combine with spacers. – jNayden Jul 12 '22 at 11:47 — jNayden, Jul 12 '22 at 11:47

score 49 · Accepted Answer · answered Mar 29 '19 at 09:51

Use leading to set a widget before appBar title & use actions to specify list of widgets in appBar which appears on right side of appBar title.

AppBar(
    leading: Image.asset('yourImage'), // you can put Icon as well, it accepts any widget.
    title: Text ("Your Title"),
    actions: [
        Icon(Icons.add),
        Icon(Icons.add),
    ],
);

Read more about it here

score 13 · Answer 2 · answered Mar 29 '19 at 10:18

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Solid Shop"),
      leading: Image.asset("your_image_asset"),
      actions: <Widget>[
        IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
        IconButton(icon: Icon(Icons.message), onPressed: () {}),
      ],
    ),
  );
}

score 2 · Answer 3 · answered Mar 29 '19 at 09:53

2

You need to use actions instead of title

actions: <Widget>[
          Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), 
              Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')),

          Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), // here add notification icon
              Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')) // here add other icon
        ],

answered Mar 29 '19 at 09:53

Taym95

2,331
13
14

thank you so much mr @Taym for your answer. I've try your suggestion and it works for me. but there is something little wrong was happened. maybe its caused by too big images i put them.. it looks not too good. but I'll try how to make it looks good :) – Roman Traversine Apr 01 '19 at 03:14

score 0 · Answer 4 · answered Jan 28 '21 at 15:05

You can add icon and also a picture on app bar, this code works for me:-

appBar: AppBar(

    centerTitle: true,

    elevation: 2,

    title: Center(

      child: Row(

        mainAxisAlignment: MainAxisAlignment.center,

        children: [

          Image.asset(

            "assets/images/bell.png",

            fit: BoxFit.contain,

            height: 28,

          ),

          Container(

            child: Text("  APP BAR"),

          )

        ],

      ),

    ),

    actions: [

      IconButton(

        icon: Icon(Icons.settings),

        onPressed: () {

          Navigator.push(

            context,

            MaterialPageRoute(

              builder: (context) {

                return Settings();

              },

            ),

          );

        },

        color: Colors.white,
      )

    ],

  ),

Hope this was helpful.

score 0 · Answer 5 · answered Jul 12 '22 at 11:49

You can combine it with Spacers :

 actions: const [
                Spacer(flex: 3),
                Icon(Icons.fit_screen),
                Spacer(flex: 10),
                Icon(Icons.width_normal),
                Spacer(flex: 1),
                Icon(Icons.aspect_ratio),
                Spacer(flex: 1),
                Icon(Icons.ad_units),
                Spacer(flex: 5),
              ],

How to make some icons at Appbar with different alignment?

5 Answers5