Flutter顶部导航栏问题求助：移除TabBar上方灰色空白区域

Hey there! Let's sort out that annoying grey blank space above your TabBar. The root cause here is that the default AppBar includes a toolbar area (even when you don't set a title), which occupies that extra space above your tabs. Here are two straightforward solutions to fix this:

Solution 1: Compress the AppBar Toolbar Height #

This approach keeps the AppBar structure but removes the empty toolbar space by setting its height to 0. It's great if you still want to use AppBar's built-in features like status bar color adaptation.

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      backgroundColor: Colors.grey,
      toolbarHeight: 0, // This line eliminates the top toolbar space
      bottom: new TabBar(
        controller: controller,
        tabs: <Tab>[
          new Tab(icon: new Icon(Icons.arrow_forward)),
          new Tab(icon: new Icon(Icons.arrow_downward)),
          new Tab(icon: new Icon(Icons.arrow_back)),
        ]
      ),
    ),
    body: new TabBarView(
      controller: controller,
      // Note: Make sure the number of tabs matches the number of TabBarView children!
      children: <Widget>[
        new first.First(),
        new second.Second(),
        new third.Third(),
        // Remove the extra two children or add corresponding tabs
        // new fourth.Fourth(),
        // new fifth.Fifth()
      ],
    ),
  );
}

Solution 2: Use PreferredSize for a Lightweight Tab Bar #

If you don't need the AppBar's additional functionality, you can directly use PreferredSize to create a custom top bar that only contains the TabBar. This gives you more control over the height and layout.

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(kTabBarHeight), // Set height to match TabBar
      child: Container(
        color: Colors.grey,
        child: TabBar(
          controller: controller,
          tabs: <Tab>[
            new Tab(icon: new Icon(Icons.arrow_forward)),
            new Tab(icon: new Icon(Icons.arrow_downward)),
            new Tab(icon: new Icon(Icons.arrow_back)),
          ],
        ),
      ),
    ),
    body: new TabBarView(
      controller: controller,
      // Remember to align tab count with page count!
      children: <Widget>[
        new first.First(),
        new second.Second(),
        new third.Third(),
      ],
    ),
  );
}

Quick Note #

I noticed your TabBar has only 3 tabs, but the TabBarView has 5 pages. This will cause a runtime error—make sure the number of tabs matches the number of pages in the view!

内容的提问来源于stack exchange，提问作者Dani Kovács