I have a SliverAppBar.large and Tab inside NestedScrollView. However the app bar not displaying properly. Title in app bar hides behind Tabs and a padding above appbar title is present while scrolling. Is this a bug ?
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
@override
Widget build(BuildContext context) {
final List<String> tabs = <String>['Tab 1', 'Tab 2'];
return DefaultTabController(
length: tabs.length,
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return <Widget>[
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar.large(
leading: const Icon(Icons.arrow_back),
title: const Text('Books'),
forceElevated: innerBoxIsScrolled,
bottom: TabBar(
tabs: tabs.map((name) => Tab(text: name)).toList(),
),
),
),
];
},
body: TabBarView(
children: tabs.map((name) {
return SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (context) {
return CustomScrollView(
key: PageStorageKey<String>(name),
slivers: <Widget>[
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: SliverFixedExtentList(
itemExtent: 48.0,
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 30,
),
),
),
],
);
},
),
);
}).toList(),
),
),
),
);
}
}