Translate other elements on DraggableScrollableSheet top-bottom movement - flutter

Question

Hi I have to translate two of my widgets based on the DraggableScrollableSheet drag position (you can think this bottom sheet as in GMaps). The widgets I have to move/animates are:
Text - It needs to translate & scale back-and-forth and in-out respectively following an arc path simultaneously. (See expected video)
Row - It needs to translate a bit and then out. Again back-and-forth.
Trails -
Text widget scaling in-out properly but translating in some weird way. (See actual video)
Row widget is fading in-out fine, but having a hard time translating it.
Expected Vid -
https://drive.google.com/file/d/1wg3q8KJc6zMe3b6mw-LgPN62FxK4dMMj/view?usp=sharing
actual vid -
https://drive.google.com/file/d/1umjDVj6PXqiatF6JVt8EeKTCxU2LyM7E/view?usp=sharing
Code -
final Duration _animationDuration = const Duration(milliseconds: 300);
bool _isNavShown = true;
double yValue = -35.0;
void _applyEffectsOnDrag(double factor) {
print(factor);
if (factor > 0.7) {
_isNavShown = false;
} else {
_isNavShown = true;
}
}
Widget _getNavigationButtons(BuildContext ctx, bool isHidden) {
return Padding(
padding: verticalAndHorizontailPadding,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
...[1, 2, 3]
.map(
(e) => Container(
decoration: CircleStyles.navButton,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: padding
decoration: decoration,
child: Icon(Icons.verified_user),
),
SizedBox(height: AppMediaQuery(ctx).appHeight(2)),
Text('block heading')
],
),
),
)
.toList()
],
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(gradient: Variables.circleGradient),
child: Stack(
children: [
Column(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: AppMediaQuery(context).appHorizontalPadding(4),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
// TODO: Goto home screen
},
child: Container(
alignment: Alignment.center,
width: 32,
height: 32,
decoration: backButtonStyle,
child: const Icon(
Icons.chevron_left,
),
),
),
IconButton(icon: const Icon(Icons.more_horiz), onPressed: null),
],
),
),
TweenAnimationBuilder(
duration: _animationDuration,
curve: Curves.easeInOut,
tween: Tween<double>(begin: 0, end: !_isNavShown ? yValue : 0),
child: Padding(
padding: somePadding,
child: const Align(
alignment: Alignment.centerLeft,
child: const Text('Circles'),
),
),
builder: (_, double dy, Widget ch) {
return Transform.scale(
scale: _isNavShown ? 1 : 0.8,
child: Transform.translate(
offset: Offset(0, dy),
child: ch,
),
);
},
),
AnimatedOpacity(
duration: _animationDuration,
opacity: _isNavShown ? 1 : 0,
child: _getNavigationButtons(context, true),
),
],
),
NotificationListener<DraggableScrollableNotification>(
onNotification: (obj) {
setState(() {
return _applyEffectsOnDrag(obj.extent);
});
},
child: DraggableScrollableSheet(
initialChildSize: 0.6,
minChildSize: 0.6,
maxChildSize: 0.9,
builder: (context, ctrl) {
return Container(
decoration: CircleStyles.sheetBase,
child: ConversationList(ctrl),
);
},
),
),
],
),
),
);
}