Resize leading widget in flutter AppBar

user_2666634 0
Viewed 11548

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

flutter
6 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.

user_123556770

A simple example to demonstrate Raffi Jonas answer

AppBar(
    automaticallyImplyLeading: false,
    title: Row(
      children: [
        Expanded(
          child: Text('One'),
        ),
        Center(
          child: Text('Two'),
        ),
        Expanded(
          child: Align(
            alignment: Alignment.centerRight,
            child: Text('Three'),
          ),
        ),
      ],
    ),
  ),
user_13899870

The leading Widget width of AppBar in Flutter can be resized using the leadingWidth property.

For Example :

AppBar(
  title: const Text('Title'),
  leadingWidth: 50,
  leading: Container()
)
user_107424720

What you want is a custom app bar in Flutter. Most people try giving their own widgets in the title argument of an AppBar. But let me show you how to properly do it.

@override
Widget build(BuildContext context) => Scaffold(
    appBar: _appBar(),
    body: _body(),
);

//Custom AppBar
_appBar() => PreferredSize(

    //kToolBarHeight: Default size used by all AppBar widgets in Flutter.
    //MediaQuery...: viewPadding.top is StatusBar area. viewPadding.bottom is iPhone bottom bar.
    
    preferredSize: PreferredSize.fromHeight(kToolBarHeight + MediaQuery.of(context).viewPadding.top),
    child: Container(
        child: Row(
          //This will spread Row content evenly across the screen.
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //Leading Widget
            Icon(Icons.home),

            //Title
            Text("Hello World!"),

            //Trailing Widget / Actions
            Icon(Icons.home),
         ],
      ),
    ),
);

Widget _body() => Container(
    color: Colors.blue,
);
user_91541030

You can set a margin for height or width.

AppBar(
    leading: Container(
      margin: EdgeInsets.symmetric(vertical: 15),
      child: IconButton(
        icon: Icon(CupertinoIcons.chevron_left),
        onPressed: () {},
      ),
    ),
user_110650690

To use a custom appBar leading button, here is the code.

 appBar: AppBar(
    title: Text('hello'),
    // automaticallyImplyLeading: false,
    elevation: 0,
    leadingWidth: 58,

    actions: [
      ProfileBar(),
    ],
    leading: Container(
      width: 14,
      //color: Colors.yellow,
      child: Row( // <--- Using row to avoid force resizing of leading 
        children: [
          Padding( // <--- Padding to make it look more nicer
            padding: const EdgeInsets.only(left: 24.0),
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
              },
              child: SvgPicture.asset( // <-- Using SvgPicture package
                'assets/svg/icons/backbtn.svg',
                width: 24,
                height: 24,
              ),
            ),
          ),
        ],
      ),
    ),
  ),
user_73402890
Related