[Flutter]Slider(スライダー)をAlertDialog(アラートダイアログ)で使えるようにするには？

どうも、ちょげ(@chogetarou)です。

SliderをAlertDialogで使えるようにする方法を紹介します。

方法
使用例

方法

SliderをAlertDialogで使えるようにするには、StatefulBuilderを使います。

具体的には、AlertDialogをStatefulBuilderのの引数「builder」の関数の戻り値にします

StatefulBuilderの引数「builder」に指定する関数の第２引数は、setStateという名前にします。

showDialog(
  context: context,
  builder: (context) {
    return StatefulBuilder(
      builder: (BuildContext context, setState) {
        return AlertDialog(
          content: Slider(
              value: _value,
              onChanged: (newValue) {
                ・・・
             },
          ),
        );
      },
    );
  },
);

StatefulBuilderを使うことで、SliderをAlertDialogで使えるようにすることが出来ます。

使用例

以下は、使用例です。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  double _value = 0.5;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return StatefulBuilder(
                    builder: (BuildContext context, setState) {
                      return AlertDialog(
                        content: SizedBox(
                          height: 100,
                          child: Slider(
                            value: _value,
                            onChanged: (newValue) {
                              setState(() {
                                _value = newValue;
                              });
                            },
                          ),
                        ),
                      );
                    },
                  );
                },
              );
            },
            child: Text('Show'),
          ),
        ),
      ),
    );
  }
}