How to make sticky TabBar in this answer.
I Want category section to stick below app bar when I scroll down. I followed this answer and want to make it sticky for better UX.
@override
Widget build(BuildContext context) {
return Container(
color: mainBackgroundColor,
child: SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Scaffold(
backgroundColor: mainBackgroundColor,
appBar: PreferredSize(
preferredSize: Size(double.infinity, 65),
child: AppBarr(isAppBar: isAppBar, label: 'Current Affairs')),
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (context, value) {
return [
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
searchBar(),
SizedBox(height: mainpadding),
topStoriesText(),
SizedBox(height: mainpadding/2),
topStoriesCard(),
SizedBox(height: mainpadding/2),
],
)),
SliverToBoxAdapter(
child: categoryTab(),
),
];
},
body: Container(
padding: EdgeInsets.only(top: mainpadding/2),
child: TabBarView(
controller: _tabController,
children: [
Stack(
alignment: Alignment.center,
children: [
ListView.builder(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
physics: const BouncingScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.only(bottom: mainpadding),
itemCount: isLoadingData?lists.length:lists.length+1,
itemBuilder: (context, index) {
if(isLoadingData==false){
if(index==lists.length){
return Padding(
padding: EdgeInsets.only(
top: mainpadding,
left: mainpadding/2,
right: mainpadding/2,
bottom: mainpadding/2
),
child: AppButton(
text: 'Load More...',
textcolor: whiteColor,
primarycolor: blackColor,
onPressed: (() {
paginatedData();
})),
);
}
}
final users = lists[index];
return all(users);
}
),
isLoadingData?
Container(
color: Color.fromARGB(45, 0, 0, 0),
)
:SizedBox(),
isLoadingData?
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
shape: BoxShape.rectangle,
color: whiteColor,
boxShadow: [
BoxShadow(
offset: Offset(1, 3),
blurRadius: 5,
color: Colors.black.withOpacity(0.14))
],
),
child: Center(child: CircularProgressIndicator(color: blackColor,)),
)
:SizedBox(),
],
),
_buildTabContext(2),
_buildTabContext(200),
_buildTabContext(2),
_buildTabContext(50),
_buildTabContext(50),
_buildTabContext(50),
_buildTabContext(50),
],
),
),
),
),
),
),
);
}
categoryTab(){ return TabBar( controller: _tabController, labelColor: blackColor, splashBorderRadius: BorderRadius.circular(10), physics: BouncingScrollPhysics(), padding: EdgeInsets.symmetric(horizontal: mainpadding/2), indicatorColor: blackColor, labelStyle: TextStyle( fontSize: 18, fontWeight: FontWeight.w600), labelPadding: EdgeInsets.symmetric(vertical: 0,horizontal: mainpadding/1.5), isScrollable: true, tabs: [ Tab(text: 'All'), Tab(text: 'General'), Tab(text: 'International'), Tab(text: 'Nation'), Tab(text: 'Education'), Tab(text: 'Economy'), Tab(text: 'Sports'), Tab(text: 'Tech') ] ); }
