I have the next code:

class _ReadingBookPage extends State<ReadingBookPage> {
     double _sizeFont = 14;
     ...
     
     @override
     Widget build(BuildContext context) {
         return Scaffold(
              body: ...
                    GestureDetector(
                        onTap: () {
                            showModalBottomSheet(...) // Here _getSettings is called
                        ...
     }

     Widget _getSettings() {
         return Container(
             ...
             Slider(
                  value: _sizeFont.toDouble(),
                  min: 0,
                  max: 18,
                  label: _sizeFont.round().toString(),
                  activeColor: Colors.black,
                  onChanged: (double value) =>
                      setState(() => _sizeFont = value)),
             ...                
     }
}

_sizeFont changes when I move slider, but the slider doesn't move. But when I click on the object (GestureDetector) again, Slider is changed its position to the value. How can I fix it?

CodePudding user response：

Use StatefulBuilder on showModalBottomSheet's builder to update the dialog UI. And pass its setState to the _getSettings method.

 showModalBottomSheet(
        context: context,
        builder: (context) => StatefulBuilder(builder: (context, setState) {
   ...
    return _getSettings(setState);

Also include a parameter for setState.

  Widget _getSettings(setState) { ...}