How can I set a scrollable TabBar in Flutter? - flutter

Question

I'm getting a problem with my TabBar I want it to be scrollable (swipe left and right by gesture).
But it's not working, I have to click on the sub category name to view it but I want it to scroll right to go to the next sub category.
I set isScrollable: true, in the TabBar widget but still the same problem.
If there is any suggestion I'm here thank you :)
1st screen
2nd screen
class CategoryScreen extends StatefulWidget {
final CategoryModel categoryModel;
CategoryScreen({#required this.categoryModel});
#override
_CategoryScreenState createState() => _CategoryScreenState();
}
class _CategoryScreenState extends State<CategoryScreen>
with TickerProviderStateMixin {
int _tabIndex = 0;
#override
void initState() {
super.initState();
Provider.of<CategoryProvider>(context, listen: false)
.getSubCategoryList(context, widget.categoryModel.id.toString());
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: ResponsiveHelper.isDesktop(context)
? PreferredSize(
child: MainAppBar(), preferredSize: Size.fromHeight(80))
: null,
body: Consumer<CategoryProvider>(
builder: (context, category, child) {
return category.subCategoryList != null
? Center(
child: Scrollbar(
child: Container(
width: 1170,
child: CustomScrollView(
physics: BouncingScrollPhysics(),
slivers: [
SliverAppBar(
expandedHeight: 200,
toolbarHeight:
50 + MediaQuery.of(context).padding.top,
pinned: true,
floating: false,
backgroundColor: Theme.of(context).primaryColor,
leading: IconButton(
icon: Icon(Icons.chevron_left,
color: ColorResources.COLOR_WHITE),
onPressed: () => Navigator.pop(context)),
flexibleSpace: FlexibleSpaceBar(
title: Text(widget.categoryModel.name,
style: rubikMedium.copyWith(
fontSize: Dimensions.FONT_SIZE_LARGE,
color: Colors.white)),
titlePadding: EdgeInsets.only(
bottom: 54 +
(MediaQuery.of(context).padding.top / 2),
left: 50,
right: 50,
),
background: Container(
margin: EdgeInsets.only(bottom: 50),
child: FadeInImage.assetNetwork(
placeholder: Images.placeholder_rectangle,
image:
'${Provider.of<SplashProvider>(context, listen: false).baseUrls.categoryImageUrl}/${widget.categoryModel.image}',
fit: BoxFit.cover,
),
),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(30.0),
child: Container(
width: MediaQuery.of(context).size.width,
color: Theme.of(context).accentColor,
**child: TabBar(
controller: TabController(
initialIndex: _tabIndex,
length:
category.subCategoryList.length + 1,
vsync: this),
isScrollable: true,
unselectedLabelColor:
ColorResources.getGreyColor(context),
indicatorWeight: 3,
indicatorSize: TabBarIndicatorSize.label,
indicatorColor:
Theme.of(context).primaryColor,
labelColor: Theme.of(context)
.textTheme
.bodyText1
.color,
tabs: _tabs(category),
onTap: (int index) {
_tabIndex = index;
if (index == 0) {
category.getCategoryProductList(context,
widget.categoryModel.id.toString());
} else {
category.getCategoryProductList(
context,
category.subCategoryList[index - 1].id
.toString());
}
},
),
),
),
),**
SliverToBoxAdapter(
child: category.categoryProductList != null
? category.categoryProductList.length > 0
? GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 5,
mainAxisSpacing: 5,
childAspectRatio: 4,
crossAxisCount: ResponsiveHelper
.isDesktop(context)
? 3
: ResponsiveHelper.isTab(
context)
? 2
: 1),
itemCount:
category.categoryProductList.length,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.all(
Dimensions.PADDING_SIZE_SMALL),
itemBuilder: (context, index) {
return ProductWidget(
product: category
.categoryProductList[index]);
},
)
: NoDataScreen()
: GridView.builder(
shrinkWrap: true,
itemCount: 10,
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.all(
Dimensions.PADDING_SIZE_SMALL),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 5,
mainAxisSpacing: 5,
childAspectRatio: 4,
crossAxisCount:
ResponsiveHelper.isDesktop(context)
? 3
: ResponsiveHelper.isTab(context)
? 2
: 1,
),
itemBuilder: (context, index) {
return ProductShimmer(
isEnabled:
category.categoryProductList ==
null);
},
),
),
],
),
),
),
)
: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Theme.of(context).primaryColor)));
},
),
);
}
List<Tab> _tabs(CategoryProvider category) {
List<Tab> tabList = [];
tabList.add(Tab(text: 'Tout'));
category.subCategoryList
.forEach((subCategory) => tabList.add(Tab(text: subCategory.name)));
return tabList;
}
}

Answer 1

You need to use a NestedScrollView to use a Sliver with a TabBar
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: SliverTabExample(),
),
);
}
class SliverTabExample extends StatefulWidget {
const SliverTabExample({Key? key}) : super(key: key);
#override
_SliverTabExampleState createState() => _SliverTabExampleState();
}
class _SliverTabExampleState extends State<SliverTabExample>
with SingleTickerProviderStateMixin {
final _tabs = List.generate(10, (index) => 'Tab#${index + 1}');
late final TabController _tabCont;
#override
void initState() {
_tabCont = TabController(length: 10, vsync: this);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (_, __) {
return [
SliverAppBar(
expandedHeight: 200,
pinned: true,
floating: false,
title: Text('TabBar Example'),
centerTitle: true,
bottom: TabBar(
controller: _tabCont,
isScrollable: true,
tabs: [
..._tabs.map(
(label) => Tab(
child: Text(label),
),
),
],
),
),
];
},
body: TabBarView(
controller: _tabCont,
children: [
..._tabs.map(
(label) => SamplePage(
label: label,
),
),
],
),
),
);
}
}
class SamplePage extends StatelessWidget {
const SamplePage({Key? key, required this.label}) : super(key: key);
final String label;
#override
Widget build(BuildContext context) {
return Container(
child: Center(child: Text('Page of $label')),
);
}
}