CODEWITHSUNDEEP
flutterappbar
Brian Oh
Brian Oh

Reputation: 10720

Flutter - how to set AppBar title height

I've spent hours attempting to make an AppBar show a title having a particular height. From what I have read on SO etc., it can be done, however I cannot achieve it and I have spent many hours attempting to. I need to make the "title:" and "actions:" have a height of about 70 or thereabouts.

From what I can determine from various tests that I have performed, when the size of the AppBar exceeds a certain size, any excess size automatically goes to the "bottom:" which in the case of my app is the TabBar.

I tested a PreferredSize for that AppBar in another test where there was no "bottom:" and no TabBar, and the space allocated to the AppBar in the program was sufficient to display the large title, but only part of the title having a large font showed. The remainder of the space that was allocated to the AppBar in that case was just blank and showed below the display of the title.

In another program that I have written, I have set the AppBar height to 35 and that works without a problem. So it appears that setting the AppBar height to a low value works for the title, but setting it to a large value does not.

I would appreciate a solution to this problem because the need for this is integral to my program and I have spent a lot of time attempting to solve the problem.

Upvotes: 4

Views: 10111

Answers (5)

CopsOnRoad
CopsOnRoad

Reputation: 267404

You can use toolbarHeight:

AppBar(
  toolbarHeight: 100, 
)

Upvotes: 11

Tahseen Quraishi
Tahseen Quraishi

Reputation: 1543

You can use preferredSize widget to give custom height in appBar

 appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0),
          child: AppBar(
          .............
          )
        ),

Upvotes: -1

Brian Oh
Brian Oh

Reputation: 10720

This problem appears to be solved by AppBar "flexibleSpace:".

Upvotes: 5

Brian Oh
Brian Oh

Reputation: 10720

The AppBar title and actions are part of the AppBar toolbar. The problem appears to be that the height of the AppBar can be changed, and that allows the height of the toolbar to be reduced, but the height of the AppBar toolbar cannot be increased beyond a height of 56. Any increase in the height of the AppBar beyond 56 does not allow the height of the toolbar to be increased beyond 56.

This is the subject of issues #7330 and #23373 for Flutter on Github. It would be great if these issues could be solved by allowing an increase in the AppBar toolbar height beyond 56. Currently the only way to solve this appears to be to write a custom AppBar and the standard AppBar has some good features.

Upvotes: 2

Sudhansu Joshi
Sudhansu Joshi

Reputation: 265

Just try this pseudocode

Text('your text here', style:TextStyle(height:70.0));

Upvotes: 0

Related Questions