在 null 上调用了方法 'findAncestorStateOfType'。接收器:null 尝试调用:findAncestorStateOfType<NavigatorState>() 错误
The method 'findAncestorStateOfType' was called on null. Receiver: null Tried calling: findAncestorStateOfType<NavigatorState>() error
谁能帮我解决这个问题?我正在关注一个关于动画径向菜单的网站编码教程。但是本教程没有说明如何通过按 FloatingActionButton 导航到其他页面。于是,我自己尝试了一下,却出现了这个错误。
这是我的代码
class RadialAnimation extends StatelessWidget {
final AnimationController controller;
RadialAnimation({Key key, this.controller})
: scale = Tween<double>(
begin: 1.5,
end: 0.0,
).animate(
CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn),
),
translation = Tween<double>(
begin: 0.0,
end: 100.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Curves.elasticOut,
),
),
rotation = Tween<double>(
begin: 0.0,
end: 360.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(
0.0,
0.7,
),
),
),
super(key: key);
// final AnimationController controller;
final Animation<double> scale;
final Animation<double> translation;
final Animation<double> rotation;
build(context) {
return AnimatedBuilder(
animation: controller,
builder: (context, builder) {
return Transform.rotate(
angle: radians(rotation.value),
child: Stack(
alignment: Alignment.center,
children: [
_buildButton1(45,
color: Colors.red, icon: FontAwesomeIcons.thumbtack),
_buildButton2(180,
color: Colors.red, icon: FontAwesomeIcons.fire),
_buildButton3(315,
color: Colors.red, icon: FontAwesomeIcons.bolt),
Transform.scale(
scale: scale.value - 1,
child: FloatingActionButton(
child: Icon(FontAwesomeIcons.timesCircle),
onPressed: _close,
),
),
Transform.scale(
scale: scale.value,
child: FloatingActionButton(
child: Icon(FontAwesomeIcons.timesCircle),
onPressed: _open,
),
),
],
),
);
});
}
这是我尝试修改代码的地方。
_buildButton1(double angle, {Color color, IconData icon}) {
final double rad = radians(angle);
return Transform(
transform: Matrix4.identity()
..translate(
(translation.value) * cos(rad),
(translation.value) * sin(rad),
),
child: FloatingActionButton(
child: Icon(icon),
backgroundColor: color,
onPressed: () {
BuildContext context;
Navigator.push(
context,
MaterialPageRoute(builder: (context) => BT()),
);
},
));
}
每次构建新按钮时,传递一个 context
。无论走到哪里,都要确保 context
安全。
// Add a context as a parameter. Keep it safe.
_buildButton1(BuildContext context, double angle, {Color color, IconData icon}) {
return Transform(
# ...
child: FloatingActionButton(
child: Icon(icon),
backgroundColor: color,
onPressed: () {
// No, that's wrong. Comment it, or even delete it FOREVER
// BuildContext context;
Navigator.push(context, MaterialPageRoute(builder: (context) => BT()));
},
),
);
}
当您调用 _buildButton1
时,只需传递上下文即可。保持安全。
build(context) {
return AnimatedBuilder(
animation: controller,
builder: (context, builder) {
// Here's your context. Use it. Keep it safe.
return Transform.rotate(
angle: radians(rotation.value),
child: Stack(
alignment: Alignment.center,
children: [
// Use it. Keep it safe.
_buildButton1(context, 45,
color: Colors.red, icon: FontAwesomeIcons.thumbtack),
_buildButton2(context, 180,
color: Colors.red, icon: FontAwesomeIcons.fire),
_buildButton3(context, 315,
color: Colors.red, icon: FontAwesomeIcons.bolt),
Transform.scale(
scale: scale.value - 1,
child: FloatingActionButton(
child: Icon(FontAwesomeIcons.timesCircle),
onPressed: _close,
),
),
Transform.scale(
scale: scale.value,
child: FloatingActionButton(
child: Icon(FontAwesomeIcons.timesCircle),
onPressed: _open,
),
),
],
),
);
});
}
谁能帮我解决这个问题?我正在关注一个关于动画径向菜单的网站编码教程。但是本教程没有说明如何通过按 FloatingActionButton 导航到其他页面。于是,我自己尝试了一下,却出现了这个错误。
这是我的代码
class RadialAnimation extends StatelessWidget {
final AnimationController controller;
RadialAnimation({Key key, this.controller})
: scale = Tween<double>(
begin: 1.5,
end: 0.0,
).animate(
CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn),
),
translation = Tween<double>(
begin: 0.0,
end: 100.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Curves.elasticOut,
),
),
rotation = Tween<double>(
begin: 0.0,
end: 360.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(
0.0,
0.7,
),
),
),
super(key: key);
// final AnimationController controller;
final Animation<double> scale;
final Animation<double> translation;
final Animation<double> rotation;
build(context) {
return AnimatedBuilder(
animation: controller,
builder: (context, builder) {
return Transform.rotate(
angle: radians(rotation.value),
child: Stack(
alignment: Alignment.center,
children: [
_buildButton1(45,
color: Colors.red, icon: FontAwesomeIcons.thumbtack),
_buildButton2(180,
color: Colors.red, icon: FontAwesomeIcons.fire),
_buildButton3(315,
color: Colors.red, icon: FontAwesomeIcons.bolt),
Transform.scale(
scale: scale.value - 1,
child: FloatingActionButton(
child: Icon(FontAwesomeIcons.timesCircle),
onPressed: _close,
),
),
Transform.scale(
scale: scale.value,
child: FloatingActionButton(
child: Icon(FontAwesomeIcons.timesCircle),
onPressed: _open,
),
),
],
),
);
});
}
这是我尝试修改代码的地方。
_buildButton1(double angle, {Color color, IconData icon}) {
final double rad = radians(angle);
return Transform(
transform: Matrix4.identity()
..translate(
(translation.value) * cos(rad),
(translation.value) * sin(rad),
),
child: FloatingActionButton(
child: Icon(icon),
backgroundColor: color,
onPressed: () {
BuildContext context;
Navigator.push(
context,
MaterialPageRoute(builder: (context) => BT()),
);
},
));
}
每次构建新按钮时,传递一个 context
。无论走到哪里,都要确保 context
安全。
// Add a context as a parameter. Keep it safe.
_buildButton1(BuildContext context, double angle, {Color color, IconData icon}) {
return Transform(
# ...
child: FloatingActionButton(
child: Icon(icon),
backgroundColor: color,
onPressed: () {
// No, that's wrong. Comment it, or even delete it FOREVER
// BuildContext context;
Navigator.push(context, MaterialPageRoute(builder: (context) => BT()));
},
),
);
}
当您调用 _buildButton1
时,只需传递上下文即可。保持安全。
build(context) {
return AnimatedBuilder(
animation: controller,
builder: (context, builder) {
// Here's your context. Use it. Keep it safe.
return Transform.rotate(
angle: radians(rotation.value),
child: Stack(
alignment: Alignment.center,
children: [
// Use it. Keep it safe.
_buildButton1(context, 45,
color: Colors.red, icon: FontAwesomeIcons.thumbtack),
_buildButton2(context, 180,
color: Colors.red, icon: FontAwesomeIcons.fire),
_buildButton3(context, 315,
color: Colors.red, icon: FontAwesomeIcons.bolt),
Transform.scale(
scale: scale.value - 1,
child: FloatingActionButton(
child: Icon(FontAwesomeIcons.timesCircle),
onPressed: _close,
),
),
Transform.scale(
scale: scale.value,
child: FloatingActionButton(
child: Icon(FontAwesomeIcons.timesCircle),
onPressed: _open,
),
),
],
),
);
});
}