How to animate Align without using AnimatedAlign and control the animation - flutter

Question

I am trying to achieve a pretty simple animation in Flutter but I am stuck.
The current animation looks like this (iPhone Screen recording): https://drive.google.com/file/d/10pzUadQrSr85eLLpyh7v3lt-x8XjFNec/view?usp=sharing
I am currently doing this with Positioned but I can not do it precisely as I want. Is there any chance that I can do this animation with Align Widget.
I have tried using AnimatedAlign and Tweens but none of them allow me to modify the Images position by scrolling up or down on the bottom sheet.
The Code:
late AnimationController bottomSheetController;
double bsOffset = 1;
#override
void initState() {
super.initState();
bottomSheetController = BottomSheet.createAnimationController(this);
bottomSheetController.duration = Duration(milliseconds: 200);
bottomSheetController.addListener(() {
double size = (bottomSheetController.value.toDouble() - 1) * -1;
setState(() {
if (size != 0) {
bsOffset = size;
}
});
});
}
.
.
.
void _handleFABPressed() {
showModalBottomSheet(
backgroundColor: Colors.transparent,
barrierColor: Colors.transparent,
transitionAnimationController: bottomSheetController,
context: context,
builder: (context) {
return Popover(
child: Container(
height: 400,
// color: Colors.lightBlue,
),
);
},
);
}
.
.
.
child: Stack(
alignment: Alignment.topCenter,
children: [
Positioned(
bottom: 50 - (50 * bsOffset),
left: ((200 / 2) - 20) - (((200 / 2) - 20) * (bsOffset - 1) * -1),
child: Image.asset(
'assets/images/8.png',
width: 200,
),
),
],
),
Thank You!

Answer 1

If I were to move the two widgets, both Align and the bottomsheet, I would do it like this:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
late AnimationController _animationController;
late Animation<Offset> _animationOffset;
var _alignment = Alignment.bottomCenter;
void _show() {
showModalBottomSheet(
backgroundColor: Colors.transparent,
barrierColor: Colors.transparent,
transitionAnimationController: _animationController,
context: context,
builder: (context) {
return Container(
height: 400,
color: Colors.red,
);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo Home Page'),
),
body: Stack(
children: [
Align(
alignment: _alignment,
child: const SizedBox(
width: 100, height: 100, child: Card(color: Colors.red)))
],
),
floatingActionButton:
FloatingActionButton(onPressed: _show, child: const Icon(Icons.add)),
);
}
void _onListenerAnimation() {
setState(() {
_alignment =
Alignment(_animationOffset.value.dx, _animationOffset.value.dy);
});
}
#override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this, duration: const Duration(milliseconds: 200))
..addListener(_onListenerAnimation);
_animationOffset = Tween<Offset>(
begin: const Offset(0, 1),
end: const Offset(-1, -0.6),
).animate(_animationController);
}
#override
void dispose() {
super.dispose();
_animationController
..removeListener(_onListenerAnimation)
..dispose();
}
}