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

Question

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

Answer 1

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

Answer 2

Thanks #最白目, thanks #Abraams gtr for your help.
Also thanks #Tomerikoo for making a review on my inicial question. :)
Like i told, it was the first time for me, here asking for help and i am not familiar with stackoverflow.
After searching on the internet for some info for my quetion i could find a solution.
It can be that it is not the best way to make it, but it is working. For sure there is a better way to make it.
I will continuo working on it. Of course if there is somebody with a better method i would appreciate another point of view.
Flutter and Dart are completely new Land for me.
Follow my approach for my inicial question.
void main() {
runApp(
const GetMaterialApp(home: MyApp()),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return GetBuilder(
init: MessageController(),
builder: (GetxController controller) {
return const WebSocketLed();
},
);
}
}
class WebSocketLed extends StatelessWidget {
const WebSocketLed({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Slider'),
),
body: Container(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Brightness1(),
Slider1(),
],
),
));
}
}
class Slider1 extends StatelessWidget {
const Slider1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final messageController = Get.put(MessageController());
return SizedBox(
child: GetBuilder<SliderController>(
init: SliderController(),
builder: (ctrl) => SizedBox(
child: Slider(
value: ctrl.quality,
min: 0,
max: 255,
divisions: 255,
label: ctrl.quality.round().toString(),
onChanged: (double value) {
ctrl.setQuality(value);
},
onChangeEnd: (messageController.sendMessage),
onChangeStart: (messageController.sendMessage)),
),
));
}
}
class Brightness1 extends StatelessWidget {
const Brightness1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
child: GetBuilder<SliderController>(
init: SliderController(),
builder: (ctrl) => SizedBox(
child: Text(
ctrl.quality.round().toString(),
),
)));
}
}
class MessageController extends GetxController {
late IOWebSocketChannel channel;
late bool connected;
var val = 255.0;
void sendMessage(double v) {
try {
val = v.roundToDouble();
channel.sink.add('clear\n');
channel.sink.add('${val.toInt().abs()}\n');
} catch (e) {
debugPrint(e.toString());
}
}
#override
void onInit() {
super.onInit();
try {
channel = IOWebSocketChannel.connect(
"ws://192.168.75.5:81"); //channel IP : Port
channel.stream.listen(
(message) {
// ignore: avoid_print
print(message);
},
onDone: () {
//if WebSocket is disconnected
// ignore: avoid_print
print("Web socket is closed");
},
onError: (error) {
// ignore: avoid_print
print(error.toString());
},
);
} catch (_) {
// ignore: avoid_print
print("error on connecting to websocket.");
}
}
#override
void dispose() {
channel.sink.close();
super.dispose();
}
}
//--------------------------------------------------------------
class SliderController extends GetxController {
static SliderController get to => Get.find();
double quality = 255;
void setQuality(double quality) {
this.quality = quality;
update();
}
}