如何在另一个有状态小部件中调用 Void() function

Question

I want to call the void play() method in another stateful widget

main.dart

    import 'dart:io';
import 'package:audioplayer/audioplayer.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:async';
import 'package:path_provider/path_provider.dart';
import 'package:record_mp3/record_mp3.dart';
import 'package:permission_handler/permission_handler.dart';
import 'regitration.dart';
import 'voiceCreate.dart';
import 'stopwatch.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String statusText = "";
  bool isComplete = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) => Scaffold(
          drawer: Drawer(
            elevation: 2.0,
            child: ListView(
              children: <Widget>[
                ListTile(
                  title: Text('Home'),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) {
                          return MyApp();
                        },
                      ),
                    );
                  },
                ),
                ListTile(
                  title: Text('Sign up'),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) {
                          return StopWatch();
                        },
                      ),
                    );
                  },
                ),
                ListTile(
                  title: Text('Sign in'),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) {
                          return LoginScreen();
                        },
                      ),
                    );
                    // add sign in page
                  },
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) {
                  return MyHomePage();
                }),
              );
            },
            // Add your onPressed code here!

            child: Icon(Icons.add),
            backgroundColor: Colors.tealAccent.shade700,
          ),
          backgroundColor: Colors.grey.shade900,
          appBar: AppBar(
            title: Text('Myvo'),
            centerTitle: true,
            backgroundColor: Colors.tealAccent.shade700,
          ),
          body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Expanded(
                      child: GestureDetector(
                        child: IconButton(
                            icon: Icon(Icons.mic),
                            color: Colors.white,
                            iconSize: 40,
                            onPressed: () async {
                              startRecord();
                            }),
                      ),
                    ),
                    Expanded(
                      child: GestureDetector(
                        child: IconButton(
                            icon: Icon(Icons.pause),
                            color: Colors.white,
                            iconSize: 40,
                            onPressed: () async {
                              pauseRecord();
                            }),
                      ),
                    ),
                    Expanded(
                      child: GestureDetector(
                        child: IconButton(
                            icon: Icon(Icons.stop),
                            color: Colors.white,
                            iconSize: 40,
                            onPressed: () async {
                              stopRecord();
                            }),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: Text(
                    statusText,
                    style: TextStyle(color: Colors.red, fontSize: 20),
                  ),
                ),
                GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () {
                    play();
                  },
                  child: Container(
                    margin: EdgeInsets.only(top: 30),
                    alignment: AlignmentDirectional.center,
                    width: 100,
                    height: 50,
                    child: isComplete && recordFilePath != null
                        ? Text(
                            "play",
                            style: TextStyle(color: Colors.red, fontSize: 20),
                          )
                        : Container(),
                  ),
                ),
              ]),
        ),
      ),
    );
  }

  Future<bool> checkPermission() async {
    if (!await Permission.microphone.isGranted) {
      PermissionStatus status = await Permission.microphone.request();
      if (status != PermissionStatus.granted) {
        return false;
      }
    }
    return true;
  }

  void startRecord() async {
    bool hasPermission = await checkPermission();
    if (hasPermission) {
      statusText = "Recording...";
      recordFilePath = await getFilePath();
      isComplete = false;
      RecordMp3.instance.start(recordFilePath, (type) {
        statusText = "Record error--->$type";
        setState(() {});
      });
    } else {
      statusText = "No microphone permission";
    }
    setState(() {});
  }

  void pauseRecord() {
    if (RecordMp3.instance.status == RecordStatus.PAUSE) {
      bool s = RecordMp3.instance.resume();
      if (s) {
        statusText = "Recording...";
        setState(() {});
      }
    } else {
      bool s = RecordMp3.instance.pause();
      if (s) {
        statusText = "Recording pause...";
        setState(() {});
      }
    }
  }

  void stopRecord() {
    bool s = RecordMp3.instance.stop();
    if (s) {
      statusText = "Record complete";
      isComplete = true;
      setState(() {});
    }
  }

  void resumeRecord() {
    bool s = RecordMp3.instance.resume();
    if (s) {
      statusText = "Recording...";
      setState(() {});
    }
  }

  String recordFilePath; //maybe**strong text** this need to take

  void play() {
    if (recordFilePath != null && File(recordFilePath).existsSync()) {
      AudioPlayer audioPlayer = AudioPlayer();
      audioPlayer.play(recordFilePath, isLocal: true);
    }
  }

  int i = 0;

  Future<String> getFilePath() async {
    Directory storageDirectory = await getApplicationDocumentsDirectory();
    String sdPath = storageDirectory.path + "/record";
    var d = Directory(sdPath);
    if (!d.existsSync()) {
      d.createSync(recursive: true);
    }
    return sdPath + "/test_${i++}.mp3";
  }
}

voiceCreate.dart I want to call here when onPressed

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _isRecording = false;

MyHomePage.play()**//getting error here** 

  _startRecording() {
    this.setState(() {
      _isRecording = true;
    });
  }

  _stopRecording() {
    this.setState(() {
      _isRecording = false;
    });
  }

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.mic),
                color: Colors.black,
                iconSize: 70,
                onPressed: () => _startRecording(),
              ),
              IconButton(
                icon: Icon(Icons.stop),
                color: Colors.black,
                iconSize: 70,
                onPressed: () => _stopRecording(),
              ),
              IconButton(
                  icon: Icon(Icons.play_arrow),
                  color: Colors.black,
                  onPressed: () => `MyHomePage(title: "My title", play: this.play()),`**// getting error here**
              ),

already called the starRecording and stopRecording

all three functions are not working when onPressed, these are startRecording, stopRecording and play. these function are working okay in main.dart but not in voiceCreate.dart

Answer 1

Dart functions are first-class, that means you can pass them around like a variable. Have a VoidCallback member on your widget class.

MyHomePage(this.playCallback, {Key key, this.title}) : super(key: key);
  final String title;
  final VoidCallback playCallback;

You can pass it in the constructor.

child: MyHomePage(play)

Then you can reach it in your state object.

class _MyHomePageState extends State<MyHomePage> {
    ...

    onPressed: widget.playCallback

    ...    
}

Warning

This is not a recommended way to achieve this. Widgets must contain zero business logic if possible. Little hacks like this answer will make your code very complex than it should be. Consider reading state management solutions.

Answer 2

Answer 3.0

As per the full code you have shown, here is the solution as per your code only. I am sure it will clear out some confusions for you.

• Passing the play() correctly to your MyHomePage from main.dart in your FloatingActionButton . I am not using full code of main.dart , but specifically your part, where you are moving to the MyHomePage

main.dart

           floatingActionButton: FloatingActionButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) {
                  // you need to pass two positional arguments
                  // since your MyHomePage accepts two arguments
                  // one is your title and one is your function
                  return MyHomePage(title: "My Title", play: play);
                }),
              );
            }

• Secondly, use your method to be passed in your MyHomePage constructor. This will remain as is. Just look at the last line of the code here, and see how are we using the passed play() method from your main.dart

class MyHomePage extends StatefulWidget {
  // accepting the method in the constructor
  // so you can pass it with the title from your main.dart
  MyHomePage({Key key, this.title, this.play}) : super(key: key);
  
  final String title;
  final Function play; // this is the function
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Now how to use that in your Class

class _MyHomePageState extends State<MyHomePage> {
  var _isRecording = false;

  _startRecording() {
    this.setState(() {
      _isRecording = true;
    });
  }

  _stopRecording() {
    this.setState(() {
      _isRecording = false;
    });
  }

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.mic),
                color: Colors.black,
                iconSize: 70,
                onPressed: () => _startRecording(),
              ),
              IconButton(
                icon: Icon(Icons.stop),
                color: Colors.black,
                iconSize: 70,
                onPressed: () => _stopRecording(),
              ),
              IconButton(
                  icon: Icon(Icons.play_arrow),
                  color: Colors.black,
                  onPressed: () => widget.play() // call like this
              )

Note: Please look at the comments in my code as well

Now check if that works for you. This should probably fix your problem.

Answer 3

I think the other 2 gave you the rough idea of how to do it the way you want. There is nothing wrong using those methods. They will work except when the navigation starts to get a little complex you will start using more pages and you might need to keep passing it down the tree.

So like easeccy mention look more into state management. Things like Blocs , Redux are all very helpful. Reason being just like how flutter builds things depending on setstate() the state management classes allows you to add the same event at different places as long as they are of the same instance. All the builders will rebuild based off the state they yield.

Eg for Blocs if you were to add a play event to the bloc. no matter where you are as long as you are able to provide the bloc to the page you can add the event and anything that is on the screen (if you were to have multiple dart files building) will all be rebuilt depending on the state you will yield.

example of bloc main.dart

void main() async{

  runApp(
    //Having this before return MaterialApp() ensures that you can call it 
    //anywhere in the app below this tree
    BlocProvider<TheTypeOfBloc>(
      create: (context) => TheTypeOfBloc(),
      child: App(),
  )

}

any other widgets/builds you have

 @override
  Widget build(BuildContext context) {
    return BlocListener<TheTypeOfBloc,TheTypeOfState>(
     listener : (context,state){
     //tldr of listen =  when your state change do something.
     //so your void function can be call here
          if(state is playState){
             _play();
          }
     }
     child:BlocBuilder<TheTypeOfBloc,TheTypeOfState> (
    // basically anything below here gets rebuild when you change a state.
      builder: (context,state) {
         return //what you want to build here like listener based on the 
                //state or just build normally without the builder.
      }
     ),
    );
 }