Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make some icons at Appbar with different alignment?

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

        ),

....

like image 651
Roman Traversine Avatar asked Mar 29 '19 09:03

Roman Traversine


People also ask

How do I center my title in AppBar?

To make the title in the center of an appbar, use centerTitle:true property in the appbar widget.

How do I change the icon back on my AppBar flutter?

Step 1: Inside the AppBar , add the leading parameter and assign the BackButton widget. Step 2: Inside the BackButton, add the color parameter and assign the color of your choice. Step 3: Run your app.


3 Answers

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

like image 198
Tirth Patel Avatar answered Oct 24 '22 13:10

Tirth Patel


@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: () {}),
      ],
    ),
  );
}
like image 41
CopsOnRoad Avatar answered Oct 24 '22 13:10

CopsOnRoad


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
        ],
like image 44
Taym95 Avatar answered Oct 24 '22 14:10

Taym95