CODEWITHSUNDEEP
flutterappbar
Alaric James Hartsock
Alaric James Hartsock

Reputation: 375

Flutter how can you create a stacked tab bar?

I'm looking to create a stacked app bar, spec included. appbar

The bottom portion of appbar doesn't take a column or any widget that would allow me to stack two tab bars together, so I was wondering if somebody has made this already. If not, I guess it's time to dig into tabBar and AppBar and build it myself. Thanks guys

Upvotes: 0

Views: 1572

Answers (1)

user4571931
user4571931

Reputation: 

TabController tabController;
  TabController tabController2;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 2, vsync: this);
    tabController2 = TabController(length: 3, vsync: this);
  }






@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Title"),
        bottom: PreferredSize(
          child: Column(
            children: <Widget>[
              TabBar(
                controller: tabController,
                tabs: [
                  Tab(text: "BROWSE",),
                  Tab(text: "WATCHLIST",),
                ],
              ),
              TabBar(
                controller: tabController2,
                tabs: [
                  Tab(text: "TRADES",),
                  Tab(text: "STOCKS",),
                  Tab(text: "INSIDERS",),
                ],
              ),
            ],
          ),
          preferredSize: Size.fromHeight(80),
        ),
      ),
    );
  }

You can set preferredSize: Size.fromHeight(80) value as per your requirement

Upvotes: 2

Related Questions