为什么当我在其小部件中调用 Flutter 有状态小部件时，它没有更改另一个有状态小部件的 state

Question

I have created two Stateful Widget classes name Editor{} that contains the Employee card UI and the RPMSlider() that controls the Radius of Items in a card.

I call the RPMSlider() in Editor Widget which looks like this in the below image,

image

My question is when I Adjust the slider it perfectly works and shows the value above it.

But it cannot make a change in the meantime in a Card UI. Until I click a button or gesturedetector having SetState();

Slider function works fine when it is created inside Editor() but in a separate Stateful widget it cannot make changes in Card

Here is The Gif Show

This is an Editor

class Editor extends StatefulWidget {
  @override
  _EditorState createState() => _EditorState();
}
class _EditorState extends State<Editor> {
  double size = 1;
  var width, height;
  @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    // print(width* 0.5733);
    return SafeArea(
      child: Container(
        width: MediaQuery.of(context).size.width,
        child: Row(
          children: [
            //TODO: Left Side
            Container(
              width: width * 0.300,
              color: Color(0xffdbe5e7),
              child: Column(
                children: [
                  //Permanent Area
                ],
              ),
            ),

            Container(
              height: height,
              padding: EdgeInsets.only(top: 10),
              width: width * 0.400,
              decoration: BoxDecoration(
                color: Color(0xffdbe5e7),
              ),
              //TODO: Card Area

              child: FlipCard(
                key: cardKey,
                flipOnTouch: false,
                ///EDITABLE CARD FRONT
                front: Container(),
                ///EDITABLE CARD Back
                back: Container(),
              ),
            ),
            Container(
              width: width * 0.300,
              color: Color(0xffdbe5e7),
              child: Column(
                children: [
                  //TODO: Radius , Padding , Margins
                  RPMSlider(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is RPMSlider

 class RPMSlider extends StatefulWidget {


  @override
  _RPMSliderState createState() => _RPMSliderState();

}

class _RPMSliderState extends State<RPMSlider> {

  @override
  Widget build(BuildContext context) {

    return radius(caseId: widgetIdCarrier,);

  }

 radius({required String caseId,label='label',position='topLeft'}) {
   return Padding(
     padding: const EdgeInsets.all(4.0),
     child: Column(
       children: [
         Row(
           children: [
             Text(
               label.toUpperCase(),
               style: TextStyle(fontSize: 10, color: Colors.black54),
             ),
             Spacer(),
             Text(
               radiusValue.round().toString(),
               style: TextStyle(fontSize: 10, color: Colors.black54),
             ),
           ],
         ),
         SizedBox(
           height: 4,
         ),
         NeumorphicSlider(
           min: 0.0,
           max: 30,
           sliderHeight: 30,
           thumb: NeumorphicIcon(
             Icons.circle,
             size: 20,
           ),
           height: 1,
           style: SliderStyle(
               borderRadius: BorderRadius.circular(3),
               lightSource: LightSource.bottomRight),
           value:radiusValue

           onChanged: (sts) {
             setState(() {
               radiusValue=sts;
             });
            
           },
         ),
       ],
     ),
   );
}


}

Answer 1

You are right, the slider cannot change another widget. It can only change it self. It can also provide callbacks when it has changed. Other widgets already do that, like the NeumorphicSlider that you use has an onChanged callback that it calls when something has changed so you can make adjustments outside the widget.

So give your widget an onChanged callback, too:

class RPMSlider extends StatefulWidget {
  final ValueChanged<int>? onChanged;

  RPMSlider({this.onChanged}); 

Now in your state class, whenever you get notified that the value has changed, you notify others that is has changed:

  onChanged: (sts) {
     setState(() {
       radiusValue = sts;
     });
     // the new part:
     final callBack = widget.onChanged
     if(callBack != null) {
        callBack(sts);
     }

Now in your EditorState, you can use it like this:

RPMSlider(onChanged: (value) {
     setState(() {
       your_state_variable = value; 
       // don't know what your_state_variable is,
       // you need to pick the one you need for this
     });
})

So now, the setState method is called inside the correct state class, that can actually change both widgets, the slider and the other one.