英文:
screen flickers when using navigator with routes defined
问题
我在main.dart文件中设置了initialRoute和routes，当我尝试使用其中一个路由时，我成功地被推送到那个路由，但我注意到在那个页面上屏幕闪烁。
这是我的main.dart文件 -
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await _configureAmplify();
runApp(
MaterialApp(
initialRoute: '/',
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => const BolWelcome(),
'/authentication': (BuildContext context) => const Authentication(),
},
),
);
}
这是我目前在BolWelcome Widget中设置导航器的方式。
void initState() {
super.initState();
_timer = Timer.periodic(const Duration(seconds: 2), (timer) {
setState(() {
Navigator.pushNamedAndRemoveUntil(
context,
'/authentication',
ModalRoute.withName('/'),
);
});
});
}
之前，我以不同的方式使用导航器，它按预期工作，并且我从未注意到任何屏幕闪烁。可能的原因是什么？
void initState() {
super.initState();
_timer = Timer.periodic(const Duration(seconds: 2), (timer) {
setState(() {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => const Authentication()),
(Route<dynamic> route) => false,
);
});
});
}
英文:
I have the initialRoute and the routes setup on the main.dart file, When I try to use one of the routes, I get pushed to that route successfully, but I notice screen flickering on that page.
Here is my main.dart file -
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await _configureAmplify();
runApp(
MaterialApp(
initialRoute: '/',
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => const BolWelcome(),
'/authentication': (BuildContext context) => const Authentication(),
},
),
);
}
This is how I got the navigator setup on the BolWelcome Widget currently.
void initState() {
super.initState();
_timer = Timer.periodic(const Duration(seconds: 2), (timer) {
setState(() {
Navigator.pushNamedAndRemoveUntil(
context,
'/authentication',
ModalRoute.withName('/'),
);
});
});
}
I was using the navigator in a different way before which worked as expected and I never noticed any screen flickering. What could be the reason?
void initState() {
super.initState();
_timer = Timer.periodic(const Duration(seconds: 2), (timer) {
setState(() {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => const Authentication()),
(Route<dynamic> route) => false,
);
});
});
}
答案1
得分: 1
使用Timer在短时间间隔内快速切换路由可能会导致屏幕闪烁，因为切换太快。请使用Future.delayed和addPostFrameCallback来避免这种问题。
请按照以下方式修改您的代码：
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
Future.delayed(const Duration(seconds: 2), () {
Navigator.pushNamedAndRemoveUntil(
context,
'/authentication',
(route) => false,
);
});
});
}
在addPostFrameCallback方法内不需要更新任何状态，因此不需要在该块中使用setState()。
英文:
You are Using a Timer to navigate between routes rapidly in a short time interval can cause screen flickering due to rapid transitions. Please useFuture.delayed the initial navigation using addPostFrameCallback to avoid this kind of issue.
Please modify your code as below:
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
Future.delayed(const Duration(seconds: 2), () {
Navigator.pushNamedAndRemoveUntil(
context,
'/authentication',
(route) => false,
);
});
});
}
you are not updating any state within the addPostFrameCallback method it means no need to use setState() in that block.
答案2
得分: 0
检查是否已为主容器/脚手架添加了背景颜色。
英文:
Check whether you have added background color to the main container/scaffold.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论