How to run fade transition animation from beginning every time in flutter? - flutter

Question

In page view, there is a header that should be changed whenever the page is changed and there is a button to perform this operation. There is a list of texts named headers, and every time the button is pressed the text should be changed with another one with a fade transition animation. Now what I really want to achieve is that when the button is pressed the next text should replace the current text with 0 opacity and within a second its opacity should go up to 1 and it should be performed without any flaws and smoothly every time the page changes.
What I'm struggling with is that I can't set the animation value to 0 when the animation is completed without any side effects to the UI, it shouldn’t be noticeable.
In short, I want the animation value to start from zero every time the button is pressed.
You can watch how the animation is working via the link https://youtube.com/shorts/3aIAWjhZ2AM?feature=share.
The controller.forward(from: 0); is somehow working not as expected...
Here is my business logic:
class AnnouncementController extends ChangeNotifier {
late AnimationController controller;
late Tween<double> tween;
late Animation<double> opacityAnimation;
PageController pageController = PageController();
List<String> headers = [
'Welcome back, Jasurbek',
'What do you offer?',
'What kind of accommodation do you have?',
'Tell the guests about the advantages of your dwelling',
'Add photos of the property',
'Let\'s think of a bright title',
'Let\'s set the price',
];
navigate(int index){
currentPageIndex = index;
notifyListeners();
controller.forward(from: 0);
pageController.animateToPage(
index,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
}
}
Here is my main class:
class _AnnouncementState extends State<Announcement> with SingleTickerProviderStateMixin {
final AnnouncementController viewModel = AnnouncementController();
#override
void initState() {
viewModel.controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
viewModel.tween = Tween(begin: 0.0, end: 1.0);
viewModel.opacityAnimation = viewModel.tween.animate(viewModel.controller);
viewModel.controller.forward();
super.initState();
}
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (BuildContext context) => viewModel,
child: Consumer<AnnouncementController>(builder: (ctx, model, index) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
height: 250,
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.all(20),
child: FadeTransition(
opacity: viewModel.opacityAnimation,
child: Text(
viewModel.headers[viewModel.currentPageIndex],
style: TextStyle(
color: Colors.black,
fontSize: 26.sp,
fontWeight: FontWeight.bold,
),
),
)
),
Expanded(
child: PageView(
controller: viewModel.pageController,
physics: const NeverScrollableScrollPhysics(),
children: [
FirstPage(viewModel: viewModel),
SecondPage(viewModel: viewModel),
ThirdPage(viewModel: viewModel),
FourthPage(viewModel: viewModel),
FifthPage(viewModel: viewModel),
],
onPageChanged: (int index) {
viewModel.navigate(index);
},
),
),
],
),
);
}),
);
}
}
Showcase
https://youtube.com/shorts/3aIAWjhZ2AM?feature=share

Answer 1

Please use animated container and you can add your animation in that and put your view inside as child
Document link- https://docs.flutter.dev/cookbook/animation/animated-container