How to call a function inside a StatefulWidget from another StatefulWidget?

Issue

I come here asking for help to understand if it is possible to put one or several functions outside a StatefulWidget followig an example that I found in the internet.

The following code example is working and it is to connect over Wifi to a ESP32 Microcontroller. Inside the StatefulWidget there are some functions like for example void channelconnect(), void initState() etc. My question is how I can put these functions outside the StatefulWidget in another Widget. Is it possible to seperate the Logic from the UI?

void main() => runApp(
      const GetMaterialApp(home: MyApp()),
    );

final key = GlobalKey<WebSocketLed1State>();

//----------------------------------------------------------------
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: WebSocketLed1(),
    );
  }
}

//---------------------------------------------------------------------------
class WebSocketLed1 extends StatefulWidget {
  const WebSocketLed1({Key? key}) : super(key: key);

  @override
  State createState() => WebSocketLed1State();
}

class WebSocketLed1State extends State<WebSocketLed1> {
  late bool ledstatus; //boolean value to track LED status, if its ON or OFF
  late IOWebSocketChannel channel;
  late bool connected; //boolean value to track if WebSocket is connected
  var val = -255.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text("LED - ON/OFF NodeMCU"),
          backgroundColor: Colors.redAccent),
      body: Container(
          alignment: Alignment.topCenter, //inner widget alignment to center
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              Container(
                  child: connected
                      ? const Text("WEBSOCKET: CONNECTED")
                      : const Text("DISCONNECTED")),
              Container(
                  child: ledstatus
                      ? const Text("LED IS: ON")
                      : const Text("LED IS: OFF")),
              Container(
                  margin: const EdgeInsets.only(top: 30),
                  child: TextButton(
                      //button to start scanning
                      onPressed: () {
                        //on button press
                        if (ledstatus) {
                          //if ledstatus is true, then turn off the led
                          //if led is on, turn off
                          sendcmd("poweroff");
                          ledstatus = false;
                        } else {
                          //if ledstatus is false, then turn on the led
                          //if led is off, turn on
                          sendcmd("poweron");
                          ledstatus = true;
                        }
                        setState(() {});
                      },
                      child: ledstatus
                          ? const Text("TURN LED OFF")
                          : const Text("TURN LED ON"))),
              SizedBox(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 30),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            'Brightness: '
                            '${((255 - val.toInt().abs()) / 255 * 100).toInt()}%',
                            style: const TextStyle(
                              color: Colors.black,
                              fontSize: 24.0,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          RotatedBox(
                            quarterTurns: 3,
                            child: SizedBox(
                              width: 200,
                              child: Slider.adaptive(
                                value: val,
                                min: -255,
                                max: 0,
                                onChanged: sendMessage,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          )),
    );
  }

  @override
  void initState() {
    ledstatus = false; //initially leadstatus is off so its FALSE
    connected = false; //initially connection status is "NO" so its FALSE

    Future.delayed(Duration.zero, () async {
      channelconnect(); //connect to WebSocket wth NodeMCU
    });

    super.initState();
  }

  void channelconnect() {
    //function to connect
    try {
      channel = IOWebSocketChannel.connect(
          "ws://192.168.204.65:81"); //channel IP : Port
      channel.stream.listen(
        (message) {
          // ignore: avoid_print
          print(message);
          setState(() {
            if (message == "connected") {
              connected = true; //message is "connected" from NodeMCU
            } else if (message == "poweron:success") {
              ledstatus = true;
            } else if (message == "poweroff:success") {
              ledstatus = false;
            }
          });
        },
        onDone: () {
          //if WebSocket is disconnected
          // ignore: avoid_print
          print("Web socket is closed");
          setState(() {
            connected = false;
          });
        },
        onError: (error) {
          // ignore: avoid_print
          print(error.toString());
        },
      );
    } catch (_) {
      // ignore: avoid_print
      print("error on connecting to websocket.");
    }
  }

  Future<void> sendcmd(String cmd) async {
    if (connected == true) {
      if (ledstatus == false && cmd != "poweron" && cmd != "poweroff") {
        // ignore: avoid_print
        print("Send the valid command");
      } else {
        channel.sink.add(cmd); //sending Command to NodeMCU
      }
    } else {
      channelconnect();
      // ignore: avoid_print
      print("Websocket is not connected.");
    }
  }

  void sendMessage(double v) {
    try {
      setState(() {
        val = v.roundToDouble();
      });
      channel.sink.add('clear\n');
      channel.sink.add('${val.toInt().abs()}\n');
    } catch (e) {
      debugPrint(e.toString());
    }
  }
}

Solution

I suggest you to define a class and define your function in it and then call functions you want any where you want.

Answered By - Abraams gtr