Slider widget disabled in Modal Bottom Sheet-CodePudding

I am trying to build a form inside a modal bottom sheet, which has a slider. However no matter what I do the slider remains disabled.

my showModalBottomSheet call:

void getForm(BuildContext context) async {
    final data = await showModalBottomSheet<Map<String, dynamic>?>(
      constraints: BoxConstraints.tight(const Size.square(400)),
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
        ),
      ),
      builder: (context) {
        return StatefulBuilder(builder: (context, setState) {
          return Padding(
            padding: const EdgeInsets.all(10.0),
            child: ResearchInput(setState),
          );
        });
      },
    );

My form code:

class ResearchInput extends StatefulWidget {
  const ResearchInput(this.setFunction, {Key? key}) : super(key: key);

  static const String routeName = '/research-input';

  final Function(void Function()) setFunction;

  @override
  _ResearchInputState createState() => _ResearchInputState();
}

class _ResearchInputState extends State<ResearchInput> {
  final _formKey = GlobalKey<FormState>();

  final _ebayPattern = RegExp(
    r'^(https?://)?(www\.)?ebay.com/itm/\d $',
  );

  final _trendsPattern = RegExp(
    r'^(https?://)?trends.google.com/trends/explore?geo=US&q=(.*)$',
  );

  @override
  Widget build(BuildContext context) {
    Map<String, dynamic> productData = {
      'date': DateTime.now(),
      'variations': 0.0,
    };
 return Form(
      key: _formKey,
      child: Center(
        child: SizedBox(
          width: 500,
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                //TextFields
                Row(
                  children: [
                    const Text('Variations'),
                    Slider(
                      key: const ValueKey('variations'),
                      value: 0,
                      onChanged: (value) {
                        setState(() {
                          productData['variations'] = value;
                        });
                      },
                      min: 0,
                      max: 4,
                      divisions: 4,
                      label: "${productData['variations']}",
                    ),
                  ],
                ),
   //other TextFields

I have tried using the pass through setState from the StatefulBuilder, but that does not change anything

See Video here: https://youtu.be/uSg5YC0vFkI

CodePudding user response：

It is not changing because productData is inside build method and every time it gets previous state.

Use initState

late Map<String, dynamic> productData;
 @override
  void initState() {
     productData = {
      'date': DateTime.now(),
      'variations': 0.0,
    };
    super.initState();
  }

And rename StatfulBuilder's setstate to avoid confusion and use this to update dialog UI.

 return StatefulBuilder(
          builder: (context, setStateSB) {
             //...
             onChanged: (value) {
                        setStateSB(() {
                          productData['variations'] = value;
                        });
                      },

CodePudding user response：

Add SingleChildScrollView(),

return SingleChildScrollView()