When scroll, how can I make the 4 tab pinned (It should show below appBar) ?
Scaffold(appBar..,
body:DefaultTabController(
length: 4,
child: CustomScrollView(slivers: <Widget>[
SliverPersistentHeader(
pinned: false,
delegate: DynamicSliverHeaderDelegate(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[Text("View More")],
),
),
),
SliverToBoxAdapter(
child: _showTab(snapshot.data)),
]),
);
_showTab function
Widget _showTab(RFWIReviewTableData rfwi) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 50,
child: AppBar(
elevation: 0,
backgroundColor: Colors.grey.shade200,
bottom: TabBar(
unselectedLabelColor: Colors.grey,
labelColor: Colors.orange,
indicatorSize: TabBarIndicatorSize.tab,
tabs: [
Tab(
text: "Response",
),
Tab(text: "Image"),
Tab(
text: "Checklist",
),
Tab(
text: "Signature",
),
]),
)),
ConstrainedBox(
constraints:
BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
child: TabBarView(
children: [
_showResponse(rfwi),
Text('Person'),
Text('people'),
Text('people')
],
),
)
],
);
}
DynamicSliverHeaderDelegate
class DynamicSliverHeaderDelegate extends SliverPersistentHeaderDelegate {
final Widget child;
final double maxHeight;
final double minHeight;
const DynamicSliverHeaderDelegate({
this.child,
this.maxHeight = 250,
this.minHeight = 80,
});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return child;
}
// @override
// bool shouldRebuild(DynamicSliverHeaderDelegate oldDelegate) => true;
@override
bool shouldRebuild(DynamicSliverHeaderDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
@override
double get maxExtent => maxHeight;
@override
double get minExtent => minHeight;
}
CodePudding user response:
Follow the below code and don't forget to align your Appbar
with topCenter
_showTab(BuildContext context, TabController controller) {
return SingleChildScrollView(
child: Column(
children: [
Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: 50,
child: AppBar(
elevation: 0,
backgroundColor: Colors.grey.shade200,
bottom: TabBar(
controller: controller,
unselectedLabelColor: Colors.grey,
labelColor: Colors.orange,
indicatorSize: TabBarIndicatorSize.tab,
tabs: [
Tab(
text: "Response",
),
Tab(text: "Image"),
Tab(
text: "Checklist",
),
Tab(
text: "Signature",
),
]),
)),
),
ConstrainedBox(
constraints:
BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
child: TabBarView(
controller: controller,
children: [
SingleChildScrollView(
child: Container(
child: Column(
children: [
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
Text('Person'),
],
),
),
),
Text('Person'),
Text('people'),
Text('people')
],
),
)
],
),
);
}
CodePudding user response:
you can use sticky_headers,
easy to implement.