I want to place a custom widget in place of appbar and want a tab view below it

Question

I have built a custom widget("cab") which displays a account login circle and no. of points user have. I want a tab view just below it . For now I have placed this custom widget inside the tab itself :

bottomNavigationBar: Material(child: TabBar(
           tabs: const <Widget>[
            Tab( icon: Icon(Icons.add)),
          Tab( icon: Icon(Icons.search))
          ]
      ),),


       body :TabBarView(
        children: <Widget>[
          Column(
            children: <Widget>[
              cab
            ],
          ), 

But I want this widget to be displayed above tab view but not the part of tab view itself . How can I do this? Thanks.

Answer 1

Replace the AppBar widget with your own widget below:

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          bottomNavigationBar: TabBar(
            labelColor: Colors.orange,
            unselectedLabelColor: Colors.grey,
            indicatorSize: TabBarIndicatorSize.tab,
            indicatorColor: Colors.orange,
            tabs: [
              Tab(
                icon: Icon(Icons.add),
              ),
              Tab(
                icon: Icon(Icons.search),
              ),
            ],
          ),
          body: Column(
            children: <Widget>[
              // Remove the AppBar code below and put your "cab" widget
              AppBar(
                primary: true,
                title: Text('Here is your cab'),
                centerTitle: true,
                backgroundColor: Colors.orange,
              ),
              Expanded(
                child: TabBarView(
                  children: [
                    Icon(Icons.add),
                    Icon(Icons.search),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}