[Material 3] Using NestedScrollView with SliverAppBar does not show collapsed SliverAppBar #104442
Description
Part of #104363.
When using the new variants SliverAppBar.medium and SliverAppBar.large in a NestedScrollView, while also using SliverOverlapAbsorber and SliverOverlapInjector, the collapsed AppBar is not shown. I believe this is because there is no Scrolled Under event triggered, as content does not go behind the SliverAppBar.
Expected result:
- When collapsing the SliverAppBar, the collapsed AppBar should show correctly.
Actual result:
- When collapsing the SliverAppBar, the collapsed AppBar does not show at all.
nestedscrollview.2.mp4
Code sample:
import 'package:flutter/material.dart';
void main() {
runApp(const TestApp());
}
class TestApp extends StatelessWidget {
const TestApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.from(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: true,
),
home: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar.large(
title: const Text('Example App'),
forceElevated: innerBoxIsScrolled,
),
),
],
body: Builder(
builder: (context) {
// Builder required to obtain correct BuildContext.
return CustomScrollView(
slivers: [
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
context,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(
title: Text('Item ${index.toString()}'),
);
},
childCount: 5,
),
)
],
);
},
),
),
),
);
}
}