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'))
            ],
          )

        ),

....

Kissner

You can combine with spacers. – Betteann

Answer 1

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

Outspan

Answer 2

@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: () {}),
      ],
    ),
  );
}

Burleson

Answer 3

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
        ],

Nelsonnema

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 :) – Kissner

Answer 4

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.

Dilative

Answer 5

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),
              ],

Betteann

Answer 6

appBar: AppBar(
    leading: Image.asset("assets/print.png"),
    backgroundColor: Colors.blue,
    actions: const [
      Icon(Icons.ac_unit_outlined),
      Icon(Icons.ac_unit_outlined),
    ],
    title: const Center(child: Text('Page Three')),
  ),

Frydman

Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? – Pedagogics