Which widgets to be used to pin tabs as below. Thank you!
2
you can use Sticky_headers, easy to implement.
Lets you place headers on scrollable content that will stick to the top of the container whilst the content is scrolled.
You can do it without additional package by using SliverMainAxisGroup to make SliverAppBar pinned up and the content above will hidden while scrolled down.
Sample code below:
import 'package:flutter/material.dart'; void main() => runApp(const SliverMainAxisGroupExampleApp()); class SliverMainAxisGroupExampleApp extends StatelessWidget { const SliverMainAxisGroupExampleApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('App Bar')), body: const SliverMainAxisGroupExample(), ), ); } } class SliverMainAxisGroupExample extends StatelessWidget { const SliverMainAxisGroupExample({super.key}); @override Widget build(BuildContext context) { return CustomScrollView( slivers: <Widget>[ SliverToBoxAdapter( child: Container( color: Colors.cyan, height: 100, child: Text('To be hidden', style: TextStyle(fontSize: 24)), ), ), SliverMainAxisGroup( slivers: <Widget>[ const SliverAppBar( title: Text('Pinned tabs'), expandedHeight: 70.0, pinned: true, ), SliverList.builder( itemBuilder: (BuildContext context, int index) { return Container( color: index.isEven ? Colors.amber[300] : Colors.blue[300], height: 100.0, child: Center( child: Text( 'Item $index', style: const TextStyle(fontSize: 24), ), ), ); }, itemCount: 10, ), ], ), ], ); } }
And this is the result:
Hopefully it can solve your problem, Thanks 😉
Click here to cancel reply.
2
Answers
you can use Sticky_headers, easy to implement.
Lets you place headers on scrollable content that will stick to the top of the container whilst the content is scrolled.
You can do it without additional package by using SliverMainAxisGroup to make SliverAppBar pinned up and the content above will hidden while scrolled down.
Sample code below:
And this is the result:
Hopefully it can solve your problem, Thanks 😉