Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add tabBar to Scaffold without appBar. #17459

Closed
vipulasri opened this issue May 10, 2018 · 4 comments

Comments

@vipulasri
Copy link

@vipulasri vipulasri commented May 10, 2018

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

screenshot_20180510-124052

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

This comment has been minimized.

Copy link

@kaetemi kaetemi commented May 10, 2018

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

This comment has been minimized.

Copy link
Author

@vipulasri vipulasri commented May 10, 2018

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

@vipulasri vipulasri closed this May 10, 2018
@TakeoffAndroid

This comment has been minimized.

Copy link

@TakeoffAndroid TakeoffAndroid commented Aug 7, 2018

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

@sandangel

This comment has been minimized.

Copy link

@sandangel sandangel commented Aug 17, 2018

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(
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.