在 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,
              ),
            ),
          ],
        ),
      );
    });
}