call method in one stateful widget from another stateful widget - Flutter

Question

I have a flutter project that i am working on i cant put the whole code cause its more than 500 lines of code so i will try to ask my question as simply as i acn using the imp. section of the code .

i am having a stateful widget and having some functions inside that stateful widget under the class that extends extends State<MusicPlayer>

file lib\main.dart

just take a simple function like

class MyAppState extends State<MyApp>{
...
void printSample (){
  print("Sample text");
}
...

this function is inside the stateful widget inside main class .

there is another file lib\MyApplication.dart

this file also has a stateful widget can i do something so that i can call the function printSample() here ..

class MyApplicationState extends State<MyApplication>{
...
@override
  Widget build(BuildContext context) {
    return new FlatButton(
      child: new Text("Print Sample Text"),
      onPressed :(){
       // i want to cal the function here how is it possible to call the 
       // function 
       // printSample()  from here??  
      }
    );
  }
...
}

Answer 1

To call a function of a parent, you can use the callback pattern. In this example, a function (onColorSelected) is passed to the child. The child calls the function when a button is pressed:

import 'package:flutter/material.dart';

class Parent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ParentState();
  }
}

class ParentState extends State<Parent> {
  Color selectedColor = Colors.grey;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          color: selectedColor,
          height: 200.0,
        ),
        ColorPicker(
          onColorSelect: (Color color) {
            setState(() {
              selectedColor = color;
            });
          },
        )
      ],
    );
  }
}

class ColorPicker extends StatelessWidget {
  const ColorPicker({this.onColorSelect});

  final ColorCallback onColorSelect;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        RaisedButton(
          child: Text('red'),
          color: Colors.red,
          onPressed: () {
            onColorSelect(Colors.red);
          },
        ),
        RaisedButton(
          child: Text('green'),
          color: Colors.green,
          onPressed: () {
            onColorSelect(Colors.green);
          },
        ),
        RaisedButton(
          child: Text('blue'),
          color: Colors.blue,
          onPressed: () {
            onColorSelect(Colors.blue);
          },
        )
      ],
    );
  }
}

typedef ColorCallback = void Function(Color color);

Internal Flutter widgets like buttons or form fields use exactly the same pattern. If you only want to call a function without any arguments, you can use the VoidCallback type instead defining your own callback type.

---

If you want to notify a higher up parent, you can just repeat this pattern on every hierarchy level:

class ColorPickerWrapper extends StatelessWidget {
  const ColorPickerWrapper({this.onColorSelect});

  final ColorCallback onColorSelect;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20.0),
      child: ColorPicker(onColorSelect: onColorSelect),
    )
  }
}

---

Calling a method of child widget from a parent widget is discouraged in Flutter. Instead, Flutter encourages you to pass down the state of a child as constructor parameters. Instead of calling a method of the child, you just call setState in the parent widget to update its children.

---

One alternative approach are the controller classes in Flutter (ScrollController, AnimationController, ...). These are also passed to the children as constructor parameters, and they contain methods to control the state of the child without calling setState on the parent. Example:

scrollController.animateTo(200.0, duration: Duration(seconds: 1), curve: Curves.easeInOut);

The children are then required to listen to these changes to update their internal state. Of course, you can also implement your own controller class. If you need to, I recommend you to look at the source code of Flutter to understand how that works.

---

Futures and streams are another alternative to pass down state, and could also be used to call a function of a child.

But I really don't recommend it. If you need to call a method of a child widget, it is very like that your application architecture is flawed. Try to move the state up to the common ancestor!

Answer 2

You can do that by use key of widget

myWidget.dart

    class MyWidget extends StatefulWidget {
     
      const MyWidget ({Key key}) : super(key: key);
     
      @override
      State<StatefulWidget> createState()=> MyState();
    
  
    }

   class MyState extends State<MyWidget >{
        
          
               
      Widget build(BuildContext context){ return ....}
    
      void printSample (){
         print("Sample text");
      }
        
 }

now when use MyWidget declare GlobalKey as global key

  GlobalKey<MyState> _myKey = GlobalKey();

and pass it when create widget

MyWidget(
key : _myKey,
)

by this key you can call any public method inside state

_myKey.currentState.printSample();

Answer 3

if you want to call printSample() func you can use:

class Myapp extends StatefulWidget{
...
    MyappState myAppState=new MyappState();
    @override
    MyappState createState() => myAppState;
    void printSample(){
        myAppState.printSample();
    }
}
class MyAppState extends State<MyApp>{
    void printSample (){
        print("Sample text");
    }
}

...............
Myapp _myapp = new Myapp();
myapp.printSample();
...

Answer 4

I found another solution by trial-and-error, but it worked.

import 'main.dart' as main;

Then add this line under the onPressed.

main.MyAppState().printSample();

Answer 5

You can give this a try, it will call a method defined in Page2 (StatefulWidget) from Page1 (StatefulWidget) widget.

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text("Call page 2 method"),
          onPressed: () => Page2().method(),
        ),
      ),
    );
  }
}

class Page2 extends StatefulWidget {
  method() => createState().methodInPage2();

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

class _Page2State extends State<Page2> {
  methodInPage2() => print("method in page 2");

  @override
  Widget build(BuildContext context) => Container();
}

Answer 6

While using callbacks and GlobalKey's is fine for simple use cases, for more complex setups they should probably be considered anti-patterns given that they hook into widget types and rely on low-level implementation logic.

If you find yourself adding more and more callbacks/globalkeys, and it starts to get messy, then it might be time to switch to something like StreamController + StreamSubscription. This way you can decouple your events from the specific widget types and abstract away the inter-widget communication logic.

Register an event controller

In your top-level widget (app-level or page-level depending on your needs) create the StreamController instance, and make sure you release it in the dispose() method:

class _TopLevelPageState extends State<TopLevelPage> {
  StreamController<MyCustomEventType> eventController = StreamController<MyCustomEventType>.broadcast();

// ...
  @override
  void dispose() {
    eventController.close();
    super.dispose();
  }
}

Pass the eventController instance as a constructor argument down into any child widget that needs to listen to events and/or trigger events.

MyCustomEventType can be either an enum (if you don't need to pass extra data) or a regular object with whatever fields you need in case you need to set extra data on the event.

Trigger an event

Now in any of the widgets (including the parent one, where you declared the StreamController) you can trigger events with:

eventController.sink.add(MyCustomEventType.UserLoginIsComplete);

Listen to events

To set up a listener in your child (or parent widget) put the following code in initState():

class _ChildWidgetState extends State<ChildWidget> {
  @override
  void initState() {
    super.initState();
    // NOTE: 'widget' is the ootb reference to the `ChildWidget` instance. 
    this.eventSubscription = widget.eventController.stream.asBroadcastStream().listen((event) {
      if (event == MyCustomEventType.UserLoginIsComplete) {
        print('handling LOGIN COMPLETE event ' + event.toString());
      } else {
        print('handling some other event ' + event.toString());
      }
  }

  @override
  void dispose() {
    this.parentSubscription.cancel();
    super.dispose();
  }
}

^{Be aware that if you override StreamController.done() then your listeners will not fire because done() replaces whatever listeners you have set previously.}

---

^{NOTE: If you have a one-to-one communication relationship between two widgets then you do not need the broadcast events flavour — in that case you can create the controller without .broadcast(), i.e. with StreamController<MyCustomEventType>() and to listen instead of .stream.asBroadcastStream().listen() you can use .stream.listen(). Also see https://api.dart.dev/stable/dart-async/Stream-class.html}

For an answer which outlines this and other approaches see Inter Widget communication

Answer 7

Here HomePage is parent page and ChildPage is child page. There is one method called onSelectItem, which we need to call from child page.

class HomePage extends StatefulWidget {

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

class HomePageState extends State<HomePage> {

  onSelectItem(String param) {
    print(param);
  }

  @override Widget build(BuildContext context) {

  }
}

class ChildPage extends StatefulWidget {
  final HomePageState homePageState;

  ChildPage({Key key, @required this.homePageState}) : super(key: key);

  _ChildPageState createState() => _ChildPageState();
}

class _ChildPageState extends State<ChildPage> {
  @override Widget build(BuildContext context) {

    return RaisedButton(
      onPressed: () {
        widget.homePageState.onSelectItem("test");
      },
      child: const Text(
          'Click here',
          style: TextStyle(fontSize: 20)
      ),
    );
  }
}

So, by using the widget and parent class state we can call the parent class method.

Answer 8

I just found a simplest solution for this question

Appearently, You can just create a file that contain only a method and you will be able to call it directly

For Example, I want to create a showModalBottomSheet method in file named custom_show_bottom_sheet.dart :

import 'package:flutter/material.dart';

customShowBottomSheet(context, Widget child){
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
        return Wrap(
          children: <Widget>[
            child,
          ],
        );
      });
}

And you can simply call it like this:

import 'package:flutter/material.dart';
import '../custom_show_bottom_sheet.dart';

class TestScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FloatingActionButton(
            onPressed: (){
              customShowBottomSheet( //A method is called here
                  context,
                  Container(
                    height: 200,
                    child: Text("This is a test"),
                  )
              );
            }),
      ),
    );
  }
}

Hope this be a help! Please let me know if I misunderstand your question or anything.