flutter) How Can I display 'onDirectionChange' value from Joystickview?

Question

I want to use joypad(control pad library) and display the value of the joypad. I used 'setState' function, but it's not move inner circle in joypad.

i want to display the values that change when i move the joypad, and to show the displayed values as speed values in a later calculation. However, the values that change when i move the joystick are not displayed.

tell me how can i Display the values... please...

class joystickWidget extends StatefulWidget {
 @override
_joystickWidgetState createState() => _joystickWidgetState();
  }

class _joystickWidgetState extends State<joystickWidget> {
 BluetoothProvider _bluetoothProvider;
 String joy = "";
 double _degree = 0.00;
 String a ="";


 void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {

  context.read<BluetoothProvider>().bluetoothState;
    });
   }



    sendMessageLed(){
   if (buttonActive2.toString()=="true"){
   _bluetoothProvider.writeData("1\r\n");
    }
   if (buttonActive2.toString() == "false"){
    _bluetoothProvider.writeData("2\r\n");
     }
    }
   sendMessageBuzzer(){
   if (buttonActive1.toString()=="true"){
    _bluetoothProvider.writeData("3\r\n");
    }
  if (buttonActive1.toString() == "false"){
    _bluetoothProvider.writeData("4\r\n");
  }
 }

 _dataCallBack(data)  {
   setState(() {
    a = data.toStringAsFixed(2);
  });
 }

   JoystickDirectionCallback onDirectionChanged(double degrees,double  distance) {
   joy = "${degrees.toStringAsFixed(2)},${distance.toStringAsFixed(2)}";
   print(joy);
   _degree = degrees;
  //_dataCallBack(_degree);
 }

  @override
     Widget build(BuildContext context) {
   _bluetoothProvider = Provider.of<BluetoothProvider>(context,listen:false);
  return Column(
   children: <Widget>[

     Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children:<Widget> [
          Row(
            children:<Widget> [
          mainAxisAlignment: MainAxisAlignment.center,
          children:<Widget> [
            Row(
              children:<Widget> [
               Text("$a"),
              ],
            )
          ],
        ),
       SizedBox(height: 50,),
      Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Row(
            children: <Widget>[
              JoystickView(
                onDirectionChanged: (degree, direction) {
                 _dataCallBack(degree);
                },
                iconsColor: Colors.indigoAccent,
                backgroundColor: Colors.white,
                innerCircleColor: Colors.indigoAccent,
                opacity: 0.8,
                size: 350,),
            ]
           )
         ],
        ),
       ],
      );
     }
     }

Answer 1

You can get the values of degrees and distance through variables. For this, you must declare two variables above your Stateful or Stateless widget, and then you can use the variables everywhere on your app. Here's a sample:

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

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

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Control Pad Example',
      home: HomePage(),
    );
  }
}

double varDegress;
double varDistance;

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Control Pad Example'),
      ),
      body: Container(
        child: JoystickView(
        onDirectionChanged: (double degrees, double distanceFromCenter) {
          varDegress = degress; 
          varDistance = distanceFromCenter;
          },
        ),
      ),
    );
  }
}