How to add tabBar to Scaffold without appBar.

[vipulasri]

I want to have tabBar as the topmost widget in the Scaffold but with no appBar and have elevation to the tabBar.

I dont want to have that empty space above tabBar because of appBar title. And also move the tab in tabBar to left/start alignment.

new Scaffold(
  appBar: new AppBar(
    bottom: new TabBar(
      isScrollable: true,
      unselectedLabelColor: Colors.grey,
      indicatorColor: Colors.black54,
      tabs: <Tab>[
        new Tab(
          text: "Featured",
        ),
        new Tab(
          text: "Popular",
        ),
      ],
      controller: _tabController,
    ),
    title: null,
  ),
);

[kaetemi]

Tried flexibleSpace?

    return new DefaultTabController(
      length: 3,
      child: new Scaffold(
        appBar: new AppBar(
          flexibleSpace: new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              new TabBar(
                tabs: [
                  new Tab(icon: new Icon(Icons.directions_car)),
                  new Tab(icon: new Icon(Icons.directions_transit)),
                  new Tab(icon: new Icon(Icons.directions_bike)),
                ],
              ),
            ],
          ),
        ),
      ),
    );

[vipulasri]

@kaetemi Thanks, the elevation thing worked and using crossAxisAlignment: CrossAxisAlignment.start tabs moved to left/start.

[ckdevrel]

@kaetemi and @vipulasri You guys are awesome. Both the things worked!. Thanks a lot

[sandangel]

should we rename the appBar prop of Scaffold? As we can use PreferredSize too.

     child: Container(
        height: 230.0,
        decoration: BoxDecoration(border: Border.all(color: kOrangeColor)),
        child: DefaultTabController(
          length: 2,
          child: Scaffold(
            appBar: PreferredSize(
              preferredSize: Size.fromHeight(35.0),
              child: TabBar(
                indicator: BoxDecoration(color: kOrangeColor),
                labelStyle: TextStyle(color: Colors.white),
                unselectedLabelColor: kOrangeColor,
                tabs: <Widget>[
                  Tab(child: Text('基本機能', style: TextStyle(fontSize: 18.0))),
                  Tab(child: Text('拡張機能', style: TextStyle(fontSize: 18.0))),
                ],
              ),
            ),
            body: Container(

[baixiaoyu2997]

我就是想要一个tabbar 顶部没有空白的写法，但是试了flexibleSpace 这个例子还是不行。原因是Column布局mainAxisAlignment: MainAxisAlignment.end,导致了Tabbar显示在下边。可行的代码为：

DefaultTabController(
      length: 3,
      child: new Scaffold(
        appBar: new AppBar(
          flexibleSpace: new Column(
-          mainAxisAlignment: MainAxisAlignment.end,
            children: [
              new TabBar(
                tabs: [
                  new Tab(icon: new Icon(Icons.directions_car)),
                  new Tab(icon: new Icon(Icons.directions_transit)),
                  new Tab(icon: new Icon(Icons.directions_bike)),
                ],
              ),
            ],
          ),
        ),
      ),
    );

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.