Flutter技术求助：如何设置AppBar标题及Actions区域高度？

Hey Brian, I’ve wrestled with this exact AppBar height oddity before—let’s get this sorted for you. The core issue here is how Flutter’s AppBar allocates space: by default, any height beyond the standard kToolbarHeight (56) gets funneled to the bottom area (your TabBar), and just wrapping it in PreferredSize doesn’t adjust the actual title/actions container height.

Here’s the proper fix: #

The key is to explicitly set the toolbarHeight property of the AppBar—this controls the height of the section containing your title and actions, not just the overall AppBar size.

1. If you have a TabBar in the bottom area:

You’ll need to calculate the total AppBar height by adding your desired toolbar height (70) to the TabBar’s height. Here’s the code:

AppBar(
  // Set the height of the title/actions section directly
  toolbarHeight: 70.0,
  title: Text("Your App Title", style: TextStyle(fontSize: 26)),
  actions: [
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
    IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
  ],
  bottom: TabBar(
    tabs: [Tab(text: "Tab 1"), Tab(text: "Tab 2")],
  ),
  // Total AppBar height = toolbar height + TabBar height
  preferredSize: Size.fromHeight(70.0 + kTabHeight),
)

This ensures the 70px is reserved exclusively for your title and actions, while the TabBar gets its own dedicated space.

2. If you don’t have a TabBar/bottom area:

It’s even simpler—just set toolbarHeight to 70, and Flutter will automatically adjust the AppBar’s total height to match:

AppBar(
  toolbarHeight: 70.0,
  title: Text("Your Tall Title", style: TextStyle(fontSize: 28)),
  actions: [
    IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
  ],
)

This will give you a full 70px height for your title and actions, with no empty space or clipped text.

Why your previous attempts didn’t work: #

• When you used PreferredSize without setting toolbarHeight, Flutter kept the title/actions section at the default 56px, shoving any extra height into the bottom area (hence your TabBar getting the extra space).
• Setting the AppBar height to 35 worked because that’s below the default toolbar height—Flutter just shrank the title section to fit the smaller total height instead of reallocating space.

Give these approaches a try, and your title/actions area should stay at 70px exactly, no matter the AppBar’s total size.

内容的提问来源于stack exchange，提问作者Brian Oh