Getting my sidebar to transition between 2 states? Flutter - flutter

Question

I am trying to create a sidebar that transitions between 2 different states in flutter for a web application. At the moment it immediately moves between the 2 different positions and their is no transition. I suspect I haven't used the AnimatedPositioned Class correctly.
How am I able to get it to animate between the 2 different positions correctly?
class _SideNavigationBarState extends State<SideNavigationBar> with singleTickerProviderStateMixin<SideNavigationBar> {
late AnimationController _animationController;
late StreamController<bool> isSideNavigationBarOpenedStreamController;
late Stream<bool> isSideNavigationBarOpenedStream;
late StreamSink<bool> isSideNavigationBarOpenedSink;
final _animationDuration = const Duration(milliseconds: 500);
#override
void initState() {
super.initState();
_animationController = AnimationController(vsync: this, duration: _animationDuration);
isSideNavigationBarOpenedStreamController = PublishSubject<bool>();
isSideNavigationBarOpenedStream = isSideNavigationBarOpenedStreamController.stream;
isSideNavigationBarOpenedSink = isSideNavigationBarOpenedStreamController.sink;
}
#override
void dispose() {
_animationController.dispose();
isSideNavigationBarOpenedStreamController.close();
isSideNavigationBarOpenedSink.close();
super.dispose();
}
void onIconPressed() {
final animationStatus = _animationController.status;
final isAnimationCompleted = animationStatus == AnimationStatus.completed;
if (isAnimationCompleted) {
isSideNavigationBarOpenedSink.add(false);
_animationController.reverse();
} else {
isSideNavigationBarOpenedSink.add(true);
_animationController.forward();
}
}
#override
Widget build(BuildContext context) {
double size = 52;
final screenWidth = MediaQuery.of(context).size.width;
return StreamBuilder<bool>(
initialData: false,
stream: isSideNavigationBarOpenedStream,
builder: (context, isSideNavigationBarOpenedAsync) {
final icon = isSideNavigationBarOpenedAsync.data! ? Icons.arrow_back_ios
: Icons.arrow_forward_ios;
return AnimatedPositioned(
duration: _animationDuration,
left: isSideNavigationBarOpenedAsync.data! ? 0 : -screenWidth,
right: isSideNavigationBarOpenedAsync.data! ? 0 : screenWidth-45,
child: Row(
children: <Widget>[
isSideNavigationBarOpenedAsync.data!
? Container(
width: 300,
color: Colors.grey,
):
Container(
width: 45,
color: Colors.grey,
),
Align(
alignment: Alignment(0, -0.9),
child: GestureDetector(
onTap: () {
onIconPressed();
},
child: Container(
child: Material(
color: Colors.transparent,
child: InkWell(
child: Container(
width: size,
height: size,
child: Icon(icon,
color: Colors.grey.withOpacity(0.5)
)
),
),
),
)
)
)
],
),
);
},
);
}

Answer 1

I recommend you instead of using some transition, use some basic simple code for it. for example you need to define a drawer in your scaffold, and it will handle everything itself.
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
drawer: Container(color: Colors.amber),
body: const Center(child: Text('body')),
);