I'm trying to implement the OpenContainer transition for go_router in Flutter. It seems like no matter what I do, the end result is choppy. :/
I'm using the native Transition widgets as well as the relatively new SnapshotWidget, but to no avail. Should I maybe use a custom painter? Would that improve performance?
Please take a look at the code below and let me know if you see any ways that I could improve performance.
Here's my attempt at an OpenContainer transition for go_router:
import 'package:flutter/material.dart';
import 'package:your_project_name_xxx/ui_models/container_transition_extra.dart';
class ContainerTransition extends StatefulWidget {
final ContainerTransitionExtra extra;
final Animation<double> animation;
final Widget? sourceWidget;
final Widget targetWidget;
const ContainerTransition({
super.key,
required this.extra,
required this.animation,
required this.sourceWidget,
required this.targetWidget,
});
@override
State<ContainerTransition> createState() => _ContainerTransitionState();
}
class _ContainerTransitionState extends State<ContainerTransition> {
static final _toTween = Tween<double>(begin: 0, end: 1);
static final _fromTween = Tween<double>(begin: 1, end: 0);
late SnapshotController _snapshotController;
late CurvedAnimation _curvedAnimation;
late CurvedAnimation _sourceAnimation;
late CurvedAnimation _targetAnimation;
late RelativeRect? _sourcePosition;
late Animation<double> _scrimOpacityAnimation;
late Animation<double> _sourceOpacityAnimation;
late Animation<double> _targetOpacityAnimation;
late Animation<BorderRadius?> _containerRadiusAnimation;
late Animation<RelativeRect> _containerPositionAnimation;
@override
void initState() {
super.initState();
_sourcePosition = widget.extra.tween.begin;
_snapshotController = SnapshotController(allowSnapshotting: true);
_curvedAnimation = CurvedAnimation(
parent: widget.animation,
curve: Curves.easeInOut,
);
_curvedAnimation.addStatusListener((status) {
if (status.isAnimating) {
_snapshotController.allowSnapshotting = true;
} else if (status.isCompleted || status.isDismissed) {
_snapshotController.allowSnapshotting = false;
}
});
_sourceAnimation = CurvedAnimation(
parent: _curvedAnimation,
curve: Interval(0, 1 / 3),
);
_targetAnimation = CurvedAnimation(
parent: _curvedAnimation,
curve: Interval(1 / 3, 1),
);
_scrimOpacityAnimation = _toTween.animate(_sourceAnimation);
_sourceOpacityAnimation = _fromTween.animate(_sourceAnimation);
_targetOpacityAnimation = _toTween.animate(_targetAnimation);
_containerRadiusAnimation = BorderRadiusTween(
begin: BorderRadius.circular(widget.extra.containerRadius),
end: BorderRadius.zero)
.animate(_curvedAnimation);
_containerPositionAnimation = _curvedAnimation.drive(widget.extra.tween);
}
@override
void dispose() {
_snapshotController.dispose();
_sourceAnimation.dispose();
_targetAnimation.dispose();
_curvedAnimation.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned.fill(
child: FadeTransition(
opacity: _scrimOpacityAnimation,
child: ColoredBox(color: widget.extra.scrimColor),
),
),
PositionedTransition(
rect: _containerPositionAnimation,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: _containerRadiusAnimation.value,
color: widget.extra.containerColor,
),
child: FadeTransition(
opacity: _targetOpacityAnimation,
child: widget.targetWidget,
),
),
),
if (_sourcePosition != null)
Positioned.fromRelativeRect(
rect: _sourcePosition!,
child: FadeTransition(
opacity: _sourceOpacityAnimation,
child: widget.sourceWidget,
),
),
],
);
}
}
Here's how I'm building the route:
Page<T> buildContainerRoute<T>(
BuildContext context,
GoRouterState state,
Ref ref,
Widget child,
) {
final containerExtra = state.extra;
if (containerExtra is ContainerTransitionExtra) {
final registryTag = containerExtra.sourceBuilderTag;
final registryBuilder =
registryTag != null ? SourceBuilderRegistry().get(registryTag) : null;
if (registryBuilder != null) {
if (registryBuilder.wasUsedAlready) {
SourceBuilderRegistry().unregister(registryTag!);
} else {
SourceBuilderRegistry().markAsUsed(registryTag!);
}
}
return CustomTransitionPage<T>(
key: state.pageKey,
child: child,
transitionDuration: Durations.medium2,
reverseTransitionDuration: Durations.medium1,
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return ContainerTransition(
animation: animation,
extra: containerExtra,
sourceWidget:
Center(child: registryBuilder?.registryItem.call(context)),
targetWidget: ClipRect(
child: OverflowBox(
alignment: Alignment.topCenter,
maxWidth: containerExtra.cachedMaxWidth,
maxHeight: containerExtra.cachedMaxHeight,
child: child,
),
),
);
},
);
} else {
if (!kIsWeb && Platform.isAndroid) {
return MaterialPage(key: state.pageKey, child: child);
} else {
return CupertinoPage(key: state.pageKey, child: child);
}
}
}
