The method 'findAncestorStateOfType' was called on null. Receiver: null Tried calling: findAncestorStateOfType<NavigatorState>() error

Question

Can anyone help me with this problem? I was following a website's coding tutorial about Animated Radial Menu. But the tutorial does not show how to navigate to other page by pressing the FloatingActionButton. Thus, I tried it myself, but this error occurs.

Here's my code

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

This is where I've tried to modified the code.

_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()),
        );
      },
    ));
   }

Answer 1

Everytime you build a new button, pass a context. Always keep a context safe wherever you go.

// 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()));
      },
    ),
  );
}

When you call the _buildButton1, just pass the context. Keep it safe.

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