切换到其他屏幕时出现黑屏抖动

Question

我在Flutter中制作了第二个屏幕。我有我的主镖、一月镖和YearScreen.dart。我想从一月屏幕切换到年份屏幕。。

但当我想切换到YearScreen屏幕时，显示屏会变黑。

一小时前，它使用了相同的Code。有人对此有经验吗。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_calendar/January.dart';
void main() {
runApp(Calendar());
}
class Calendar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(debugShowCheckedModeBanner: false,
home: JanuaryScreen());
}
}

1月4日开始

import 'package:flutter/material.dart';
import 'package:flutter_calendar/YearScreen.dart';
class JanuaryScreen extends StatefulWidget {
@override
_JanuaryScreenState createState() => _JanuaryScreenState();
}
class _JanuaryScreenState extends State<JanuaryScreen> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
floatingActionButton: Stack(children: [
Positioned(
top: 300,
left: 285,
child: SizedBox(
height: 60,
width: 101,
child: FloatingActionButton.extended(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return YearScreen();
}));
},
elevation: 0,
isExtended: true,
backgroundColor: Colors.black,
splashColor: Colors.blueGrey,
highlightElevation: 0,
label: Text("J"),
))),
Positioned(
top: 600,
right: 285,
child: SizedBox(
height: 60,
width: 101,
child: FloatingActionButton.extended(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return YearScreen();
}));
},
elevation: 0,
isExtended: true,
backgroundColor: Colors.black,
splashColor: Colors.blueGrey,
highlightElevation: 0,
label: Text("2020"),
)))
]),
backgroundColor: Colors.blueGrey,
appBar: PreferredSize(
preferredSize: Size.fromHeight(65.0),
child: AppBar(
backgroundColor: Colors.blueGrey,
elevation: 0.0,
title: Transform(
transform: Matrix4.translationValues(-85.0, 0.0, 0.0),
child: Text(
"January",
style: TextStyle(fontSize: 50),
),
),
),),
body: ListView(
children: [
RaisedButton(
child: Text(
"1",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"2",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"3",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"4",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"5",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"6",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"7",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"8",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"9",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"10",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"11",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"12",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"13",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"14",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"15",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"16",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"17",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"18",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"19",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"20",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"21",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"22",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"23",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"24",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"25",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"26",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"27",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"28",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"29",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
RaisedButton(
child: Text(
"30",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"31",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
splashColor: Colors.transparent,
elevation: 0,
onPressed: () {
print("j");
},
),
],
itemExtent: 211.89,
),
),
);
}
}

YearScreen.dart

import 'package:flutter/material.dart';
import 'package:flutter_calendar/January.dart';



class YearScreen extends StatefulWidget {
@override
_YearScreenState createState() => _YearScreenState();
}





class _YearScreenState extends State<YearScreen> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.blueGrey,
body: ListView(
children: [
RaisedButton(
child: Text(
"2020",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return JanuaryScreen();
}));
},
),
RaisedButton(
child: Text(
"2021",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
onPressed: () {
print("2021");
},
),
RaisedButton(
child: Text(
"2022",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
onPressed: () {
print("2022");
},
),
RaisedButton(
child: Text(
"2023",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
onPressed: () {
print("2023");
},
),
RaisedButton(
child: Text(
"2024",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
onPressed: () {
print("2024");
},
),
RaisedButton(
child: Text(
"2025",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
onPressed: () {
print("2025");
},
),
RaisedButton(
child: Text(
"2026",
style: TextStyle(fontSize: 130),
),
onPressed: () {
print("2026");
},
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
),
RaisedButton(
child: Text(
"2027",
style: TextStyle(fontSize: 130),
),
onPressed: () {
print("2027");
},
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
),
RaisedButton(
child: Text(
"2028",
style: TextStyle(fontSize: 130),
),
onPressed: () {
print("2028");
},
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
),
RaisedButton(
child: Text(
"2029",
style: TextStyle(fontSize: 130),
),
onPressed: () {
print("2029");
},
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
),
RaisedButton(
child: Text(
"2030",
style: TextStyle(fontSize: 130),
),
color: Colors.blueGrey,
elevation: 0,
splashColor: Colors.transparent,
onPressed: () {
print("2030");
},
),
],
itemExtent: 300,
),
),);
}
}

Answer 1

可能是因为您正在从JanuaryScreen和YearScreen的构建方法返回MaterialApp。你不需要从任何地方返回MaterialApp，你只需要用MaterialApp包裹小部件树的最开始部分，然后从树下的孩子那里返回类似Scaffold的东西。如果您从YearScreen和JanuaryScreen中删除MaterialApp，它应该可以正常工作。