How to use AnimatedSwitcher and CustomScrollView together - flutter

Question

I want switch status with animation in CustomScrollView, but it throw error.
class SliverAnimatedSwitcher extends StatefulWidget {
final state;
const SliverAnimatedSwitcher({Key key, this.state}) : super(key: key);
#override
_SliverAnimatedSwitcherState createState() => _SliverAnimatedSwitcherState();
}
class _SliverAnimatedSwitcherState extends State<SliverAnimatedSwitcher> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('SliverAnimatedSwitcher'),
),
_buildContent(),
],
),
);
}
get state => widget.state;
Widget _buildContent() {
var content;
if (state.isNotEmpty == true) {
content = SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
var item = state.items[index];
return ListTile(
title: Text(item.title),
);
},
childCount: state.items.length,
),
);
} else if (state.isError) {
content = SliverFillRemaining(
key: Key('error'),
child: Container(alignment: Alignment.center, child: Text('Error')),
);
} else if (state.isLoading) {
content = SliverFillRemaining(
key: Key('loading'),
child: Container(alignment: Alignment.center, child: Text('Loading')),
);
} else {
content = SliverFillRemaining(
key: Key('empty'),
child: Container(alignment: Alignment.center, child: Text('Empty')),
);
}
return AnimatedSwitcher(
duration: Duration(milliseconds: 300),
child: content,
);
}
}

Answer 1

There's a sliver_tools package on pub.dev that has a SliverAnimatedSwitcher. You'd use it like this:
SliverAnimatedSwitcher(
duration: kThemeAnimationDuration,
child: content,
)

Answer 2

It is because sliver widget is not capable with Stack which is using as layout builder inside AnimatedSwitcher.
I found a temporary solution. Though the result is not equal to the original one (only show the last widget in the result), but I think it is acceptable for me now with such little effort.
First create a SliverAnimatedSwitcher exact the same code as AnimatedSwitcher here
Modify the Stack part to return the currentChild only (defaultLayoutBuilder)
Change FadeTransition to SliverFadeTransition (defaultTransitionBuilder)
.
static Widget defaultLayoutBuilder(Widget currentChild, List<Widget> previousChildren) {
return currentChild;
}
.
static Widget defaultTransitionBuilder(Widget child, Animation<double> animation) {
return SliverFadeTransition(
opacity: animation,
sliver: child,
);
}
If someone can find a way to Stack Sliver widgets above each other, the result may be more perfect.