Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resize leading widget in flutter AppBar

Tags:

flutter

I am making a custom AppBar that has a larger height than the typical AppBar. I would like to resize the leading widget/icon as well, and take advantage of the automaticallyImplyLeading default behaviors (so the menu icons and back icons are automatically implemented).

This is the solution I thought I would implement:

class AppAppBar extends PreferredSize{
  AppAppBar(String title) : super(
    preferredSize: Size.fromHeight(56.0),
    child: AppBar(
      centerTitle: true,
      title: Text(title, style: textStyle)
    )) {
    (child as AppBar).leading = 
        SizedBox(width: 30.0, height: 30.0, child: (child as AppBar).leading);
  }

  static const textStyle = TextStyle(fontSize: 32.0);
}

But of course this won't work because (child as AppBar).leading is final.

So in the AppBar below (text size made dramatically larger for illustration purposes), I would like to make the automatically added hamburger icon larger in comparison.

enter image description here

What do you think? Are there solutions for this or should I give up on the automatic icons and add them myself?

Edit: Added an image to show what I mean

like image 938
mitenko Avatar asked Aug 29 '18 17:08

mitenko


1 Answers

You cant because it is a predefined widget.

You can work around it with a Row widget:

Scaffold(
key:_scaffoldKey,
drawer: Drawer(),
appBar: AppBar(
      automaticallyImplyLeading: false
      title: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(
              height: 20, // Your Height
              width: 20, // Your width
              child: IconButton( // Your drawer Icon 
                      onPressed: () => _scaffoldKey.currentState.openDrawer()),
                      icon: Icon(Icons.arrow_back, color: Colors.white),
          ),)
          // Your widgets here
        ],
      ),
    ),
)

You need the Key to open the drawer with _scaffoldKey.currentState.openDrawer().

automaticallyImplyLeading: false will prevent the default drawer Icon.

like image 134
Raffi Jonas Avatar answered Sep 24 '22 02:09

Raffi Jonas