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 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 createState() => _ContainerTransitionState(); } class _ContainerTransitionState extends State { static final _toTween = Tween(begin: 0, end: 1); static final _fromTween = Tween(begin: 1, end: 0); late SnapshotController _snapshotController; late CurvedAnimation _curvedAnimation; late CurvedAnimation _sourceAnimation; late CurvedAnimation _targetAnimation; late RelativeRect? _sourcePosition; late Animation _scrimOpacityAnimation; late Animation _sourceOpacityAnimation; late Animation _targetOpacityAnimation; late Animation _containerRadiusAnimation; late Animation _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 buildContainerRoute( 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( 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); } } } ```

Enjoying FOSS

[HELP] go_router custom transition performance

[HELP] go_router custom transition performance