CODEWITHSUNDEEP
flutterdartappbar
Idris Stack
Idris Stack

Reputation: 566

How to increase on the size of the leading icon off an AppBar flutter

I am looking for a way of increasing the size of Appbar leading Icon. Below is my code :

appBar: PreferredSize(
              preferredSize: Size.fromHeight(120.0),
              child: AppBar(
                leading: SizedBox(
                  width: 200,
                height: 200,
                child: IconButton(
                  padding: new EdgeInsets.all(0.0),
                  icon: Image.asset('assets/app_logo.png', height: 700.0, width: 700.0,)
                  ,
                )),
            centerTitle: true,
            actions: <Widget>[
              IconButton(
                  icon: Image.asset('assets/path.png'))
            ],
            bottom: TabBar(
                labelColor: Colors.white,
                indicatorColor: Colors.lime,

                tabs:[
                  Tab(icon: null,text: 'RECENT',),
                  Tab(icon: null, text: 'TOPICS',),
                  Tab(icon: null, text: 'AUTHORS',),
                ]
            ),
          )

From the code above, specifically the size I implemented is below, but it couldn't work :

child: AppBar(
                    leading: SizedBox(
                      width: 200,
                    height: 200,
                    child: IconButton(
                      padding: new EdgeInsets.all(0.0),
                      icon: Image.asset('assets/app_logo.png', height: 700.0, width: 700.0,)
                      ,
                    )),

My goal is to increase the Right top icon more bigger, but it doesn't increase it's size.

The screenshot is as below :

enter image description here

Upvotes: 3

Views: 9197

Answers (4)

Aliasghar Gh
Aliasghar Gh

Reputation: 39

To customize the layout and avoid using the default AppBar, you can create your own custom AppBar inside a Row and then add padding or any other styling as needed. Here’s how you can do it:

Scaffold(
body:Column(
      children: [
        Row(
          children: [
            // Write Your AppBar Here...
          ],
        ),
        Expanded(
          child: SingleChildScrollView(
            physics: BouncingScrollPhysics(),
            child: Column(
              children: [
                // Write Your body Here
              ],
            ),
          ),
        )
      ],
    )
)

The Row widget is used for your custom AppBar, which can contain any widgets you need (e.g., title, icons, etc.)

good luck ;)

Upvotes: 0

Asim Khan
Asim Khan

Reputation: 365

you Can Increase or decrease Image or IconSize by using Transform.scale widget

 appBar: AppBar(
    leading: Transform.scale(
      scale: 0.5,
      child: Image.asset(AppAssetsConfig.MenuIcon)),
    automaticallyImplyLeading: false,
    elevation: 0,

backgroundColor: Color(BasicAppColor.primaryColor), ),

Upvotes: 0

Aleksey Teplov
Aleksey Teplov

Reputation: 31

Using Transform.scale is not quite right, there is an easier way to get the desired effect.

AppBar(
    toolbarHeight: 100,    //set height appBar
    leading: Image.asset('image/my_logo.png', width: 120, height: 100), //insert logo image
    leadingWidth: 120, //set leading height. By default width is 56
)

Upvotes: 3

Darshan
Darshan

Reputation: 11679

You can increase the size of the icon by wrapping IconButton with Transform.scale and pass scale value as 2, depending on how big you want the icon to be. Working sample code below:

centerTitle: true,
                actions: <Widget>[
                  Transform.scale(
                    scale: 2,
                    child: IconButton(
                        icon: Image.asset('assets/placeholder.png'))
                  ),

                ],

This increases size of the top right icon in the appbar, as:

enter image description here

You may adjust the scale per your need and also can apply same change to top left icon too.

Hope this answers your question.

Upvotes: 4

Related Questions