Flutter: How I can fix page controller animation error - animation

Question

I have a page containing a page view slider with a page controller and I get this error:
[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception:
Looking up a deactivated widget's ancestor is unsafe. E/flutter (
7013): At this point the state of the widget's element tree is no
longer stable. E/flutter ( 7013): To safely refer to a widget's
ancestor in its dispose() method, save a reference to the ancestor by
calling dependOnInheritedWidgetOfExactType() in the widget's
didChangeDependencies() method.
I'm trying to solve it but I can't and I don't know the reason for this error.
This my code which I use:
var pageController = PageController(initialPage: 0);
var pageViewModelData = List<PageViewData>();
Timer sliderTimer;
var currentShowIndex = 0;
#override
void initState() {
pageViewModelData.add(PageViewData(
titleText: 'Cape Town',
subText: 'Extraordinary five-star\noutdoor activites',
assetsImage: 'assets/images/explore_2.jpg',
));
pageViewModelData.add(PageViewData(
titleText: 'Find best deals',
subText: 'Extraordinary five-star\noutdoor activites',
assetsImage: 'assets/images/explore_1.jpg',
));
pageViewModelData.add(PageViewData(
titleText: 'Find best deals',
subText: 'Extraordinary five-star\noutdoor activites',
assetsImage: 'assets/images/explore_3.jpg',
));
sliderTimer = Timer.periodic(Duration(seconds: 4), (timer) {
if (currentShowIndex == 0) {
pageController.animateTo(MediaQuery.of(context).size.width, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
} else if (currentShowIndex == 1) {
pageController.animateTo(MediaQuery.of(context).size.width * 2, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
} else if (currentShowIndex == 2) {
pageController.animateTo(0, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
}
});
super.initState();
}
#override
void dispose() {
sliderTimer?.cancel();
super.dispose();
}
I get the error start from this line:
MediaQuery.of(context).size.width
Can anyone tell me the reason for this issue! Thanks

Answer 1

You can copy paste run full code below
Value of MediaQuery.of(context).size.width is not not ready in initState()
You can use WidgetsBinding.instance.addPostFrameCallback
code snippet
WidgetsBinding.instance.addPostFrameCallback((_) {
print('width ${MediaQuery.of(context).size.width}');
sliderTimer = Timer.periodic(Duration(seconds: 4), (timer) {
if (currentShowIndex == 0) {
pageController.animateTo(MediaQuery.of(context).size.width, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
} else if (currentShowIndex == 1) {
pageController.animateTo(MediaQuery.of(context).size.width * 2, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
} else if (currentShowIndex == 2) {
pageController.animateTo(0, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
}
});
});
working demo
output
I/flutter ( 1876): width 411.42857142857144
full code
import 'dart:io';
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
home: new AnimatedIconExample(),
));
}
class AnimatedIconExample extends StatefulWidget {
#override
_AnimatedIconExampleState createState() => _AnimatedIconExampleState();
}
class _AnimatedIconExampleState extends State<AnimatedIconExample>
with SingleTickerProviderStateMixin {
PageController pageController = PageController();
AnimationController controller;
Timer sliderTimer;
var currentShowIndex = 0;
#override
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
WidgetsBinding.instance.addPostFrameCallback((_) {
print('width ${MediaQuery.of(context).size.width}');
sliderTimer = Timer.periodic(Duration(seconds: 4), (timer) {
if (currentShowIndex == 0) {
pageController.animateTo(MediaQuery.of(context).size.width, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
} else if (currentShowIndex == 1) {
pageController.animateTo(MediaQuery.of(context).size.width * 2, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
} else if (currentShowIndex == 2) {
pageController.animateTo(0, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
}
});
});
}
#override
void dispose() {
controller?.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: GestureDetector(
child: Center(
child: AnimatedIcon(
icon: AnimatedIcons.menu_close, progress: controller),
),
onTap: () {
controller.reverse();
pageController.animateToPage(0,
duration: Duration(seconds: 1), curve: Curves.linear);
},
),
title: Text("Animated PageView Controller")),
body: PageView(
controller: pageController,
scrollDirection: Axis.vertical,
children: <Widget>[
buildPage0(),
Container(color: Colors.green),
Container(color: Colors.blue),
Container(color: Colors.yellow),
Container(color: Colors.pink),
],
),
);
}
show(int page) {
controller.forward();
pageController.animateToPage(page,
duration: Duration(seconds: 1), curve: Curves.linear);
}
Container buildPage0() {
return Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ListTile(onTap: () => show(1), title: Center(child: Text("Green"))),
ListTile(onTap: () => show(2), title: Center(child: Text("Blue"))),
ListTile(onTap: () => show(3), title: Center(child: Text("Yellow"))),
ListTile(onTap: () => show(4), title: Center(child: Text("Pink"))),
],
),
);
}
}