you can achieve this by using a default tab controller
```
class Tabs extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 30),
child: DefaultTabController(
initialIndex: 0,
length: 4,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 30),
child: TabBar(
indicatorSize: TabBarIndicatorSize.label,
isScrollable: true,
indicatorColor: Colors.orangeAccent,
unselectedLabelColor: Colors.grey,
labelPadding: EdgeInsets.only(
bottom: 15,
),
indicatorWeight: 3.5,
labelColor: Colors.black,
labelStyle: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18,
),
tabs: <Widget>[
Container(
width: 140,
child: Center(
child: Text("Popular"),
),
),
Container(
width: 140,
child: Center(
child: Text("New"),
),
),
Container(
width: 140,
child: Center(
child: Text("Recommended"),
),
),
Container(
width: 140,
child: Center(
child: Text("Saved"),
),
),
]),
),
//using expanded means you dont have set height manually
Expanded(child:
Container(
margin: EdgeInsets.symmetric(vertical: 25),
padding: EdgeInsets.symmetric(horizontal: 0),
child: TabBarView(children: <Widget>[
Text("popular"),
Text("New"),
Text("Recommended"),
Text("Saved"),
]),
)
],
)),)
);
}
}
```
Another solution is that you could use a pinned `SliverAppBar` with `FlexibleSpaceBar` within `DefaultTabController`. Sample codes:
Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
floating: true,
pinned: true,
bottom: TabBar(
tabs: [
Tab(text: "Posts"),
Tab(text: "Likes"),
],
),
expandedHeight: 450,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Profile(), // This is where you build the profile part
),
),
];
},
body: TabBarView(
children: [
Container(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return Container(
height: 40,
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
Container(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return Container(
height: 40,
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
),
),
),
),
Before scrolling:
[![enter image description here][1]][1]
After scrolling:
[![enter image description here][2]][2]
[1]: https://i.stack.imgur.com/X4ebd.png
[2]: https://i.stack.imgur.com/Gig96.png
