How to call a method from one statefulWidget in another Widget (Flutter)

Question

I am trying to run method doAnimation from another widget by clicking on a FloatingActionButton. Please tell me how to do this with this simple example. I know how to do this using the Provider package, but the code is cumbersome. How can I do this using Flutter's native methods? Or, most likely, it can be done nicely with the Provider, but I don't know how. A similar question has already been asked, but the second version of flutter and dart has already been released. State management difficulties are probably the biggest newbies problem.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MyAnimation(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //TODO! error is here
          _MyAnimationState().doAnimation();
          //MyAnimation().createState().doAnimation(); // ?
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

class MyAnimation extends StatefulWidget {
  const MyAnimation({Key? key}) : super(key: key);

  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation> {
  double _height = 250;
  bool _isOpen = true;

  void doAnimation() {
    _isOpen = !_isOpen;
    setState(() {
      if (_isOpen) {
        _height = 250;
      } else {
        _height = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: AnimatedContainer(
            padding: EdgeInsets.all(20),
            duration: Duration(milliseconds: 250),
            width: 250,
            height: _height,
            color: Colors.lightBlueAccent,
            child: Center(
              child: Text(
                'My Test String',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
        ElevatedButton(
            onPressed: () {
              doAnimation(); // works as it should
            },
            child: (_isOpen)? Text('Close Widget') : Text('Open Widget'))
      ],
    );
  }
}

This error occurs when I try to use the class methods in the usual way.

This happens when you call setState() on a State object for a widget that hasn't been inserted into the widget tree yet. It is not necessary to call setState() in the constructor, since the state is already assumed to be dirty when it is initially created.

Answer 1

This is actually quite simple and doesn't require any kind of package. You can do this with the help of global keys. First create a global key like this GlobalKey<_MyAnimationState> _key = GlobalKey<_MyAnimationState>();. Then pass this key while using MyAnimation class like this MyAnimation(key: _key). Now use this key in the onPressed function to call the doAnimation method like this _key.currentState!.doAnimation();

Here is the complete implementation.

import 'package:flutter/material.dart';
    
void main() {
  runApp(MyApp());
}
    
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}
    
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
    
class _MyHomePageState extends State<MyHomePage> {
   GlobalKey<_MyAnimationState> _key = GlobalKey<_MyAnimationState>(); // declaration of the key
      
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MyAnimation(key: _key), // passing the key
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _key.currentState!.doAnimation(); // calling the method from child widget
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}
    
class MyAnimation extends StatefulWidget {
  const MyAnimation({Key? key}) : super(key: key);
    
  @override
  _MyAnimationState createState() => _MyAnimationState();
}
    
class _MyAnimationState extends State<MyAnimation> {
  double _height = 250;
  bool _isOpen = true;
    
  void doAnimation() {
    _isOpen = !_isOpen;
    setState(() {
      if (_isOpen) {
        _height = 250;
      } else {
        _height = 0;
      }
    });
  }
    
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: AnimatedContainer(
            padding: EdgeInsets.all(20),
            duration: Duration(milliseconds: 250),
            width: 250,
            height: _height,
            color: Colors.lightBlueAccent,
            child: Center(
              child: Text(
                'My Test String',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
        ElevatedButton(
            onPressed: () {
              doAnimation(); // works as it should
            },
            child: (_isOpen)? Text('Close Widget') : Text('Open Widget'))
      ],
    );
  }
}