class CircularCharts extends StatefulWidget {
const CircularCharts({super.key});
@override
State<CircularCharts> createState() => _CircularChartsState();
}
class _CircularChartsState extends State<CircularCharts>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
bool _isButton1Active = true;
int selectedToggle = 1;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
);
_animation = Tween<double>(begin: 0, end: 1).animate(_controller)
..addListener(() {
setState(() {});
});
}
void monthlySelected() {
if (!_isButton1Active) {
setState(() {
_isButton1Active = true;
});
}
}
void yearlySelected() {
if (_isButton1Active) {
setState(() {
_isButton1Active = false;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 44.r,
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.4),
borderRadius: BorderRadius.circular(100)),
child: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
AnimatedAlign(
alignment: _isButton1Active
? Alignment.centerLeft
: Alignment.centerRight,
duration: const Duration(milliseconds: 300),
child: Container(
width: MediaQuery.of(context).size.width / 2,
height: 45.r,
decoration: BoxDecoration(
color: const Color(0xff9ba0fc),
borderRadius: BorderRadius.circular(100)),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
InkWell(
onTap: () {
monthlySelected();
},
child: Text(
"Monthly",
style: TextStyle(color: Colors.black, fontSize: 15.sp),
)),
InkWell(
onTap: () {
yearlySelected();
},
child: Text("Yearly",
style:
TextStyle(color: Colors.black, fontSize: 15.sp)))
],
),
],
),
),
),
);
}
}
Good question , the `PageRouteBuilder` use an `AnimationController` by default to handle the animation transition so, when you dismiss your view, it just call 'reverse' method from the animationController and you will see the same animation you are using but in reverse.
In case you want to change the animation when you dismiss your view you can do it checking the status of the current animation and compare with `AnimationStatus.reverse`
This is your code with a `Fade` animation when it's in reverse.
class SlideLeftRoute extends PageRouteBuilder {
final Widget enterWidget;
SlideLeftRoute({this.enterWidget})
: super(
pageBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return enterWidget;
},
transitionsBuilder: (BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
if (animation.status == AnimationStatus.reverse) {
//do your dismiss animation here
return FadeTransition(
opacity: animation,
child: child,
);
} else {
return SlideTransition(
position: new Tween<Offset>(
begin: const Offset(1.0, 0.0),
end: Offset.zero,
).animate(animation),
child: child);
}
},
);
}
**WORKAROUND**
class SlideLeftRoute extends PageRouteBuilder {
final Widget enterWidget;
final Widget oldWidget;
SlideLeftRoute({this.enterWidget, this.oldWidget})
: super(
transitionDuration: Duration(milliseconds: 600),
pageBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return enterWidget;
},
transitionsBuilder: (BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
return Stack(
children: <Widget>[
SlideTransition(
position: new Tween<Offset>(
begin: const Offset(0.0, 0.0),
end: const Offset(-1.0, 0.0),
).animate(animation),
child: oldWidget),
SlideTransition(
position: new Tween<Offset>(
begin: const Offset(1.0, 0.0),
end: Offset.zero,
).animate(animation),
child: enterWidget)
],
);
});
}
Usage:
Navigator.of(context)
.push(SlideLeftRoute(enterWidget: Page2(), oldWidget: this));
