flutter, Switch widget does not work properly in the showDialog

Question

I found this site and I run the code. That example code is working well. This code is here.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter - tutorialkart.com'),
        ),
        body: Center(
          child: Switch(
            value: isSwitched,
            onChanged: (value) {
              setState(() {
                isSwitched = value;
                print(isSwitched);
              });
            },
            activeTrackColor: Colors.lightGreenAccent,
            activeColor: Colors.green,
          ),
        )
    );
  }
}

Fixed Switch Widget to be placed inside ShowDialog.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        body: Center(
          child: RaisedButton(onPressed: () {
            var ret = showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(

                  content: Container(

                    height: MediaQuery.of(context).size.height / 3,
                    child: Center(
                      child: Switch(
                        value: isSwitched,
                        onChanged: (value) {
                          setState(() {
                            isSwitched = value;
                            print(isSwitched);
                          });
                        },
                        activeTrackColor: Colors.lightGreenAccent,
                        activeColor: Colors.green,
                      ),
                    ),
                  ),
                );
              },
            );
          },child: Text("show toggle button"),),
        ),
    );
  }
}

isSwitched variable is not changed.

If you run the Switch Widget separately, it works normally.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}
class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        body: Center(
          child: RaisedButton(onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(

                  content: Container(

                    height: MediaQuery.of(context).size.height / 3,
                    child: Center(
                      child: SwitchWidget(),
                    ),
                  ),
                );
              },
            );
          },child: Text("show toggle button"),),
        ),
    );
  }
}

class SwitchWidget extends StatefulWidget {
  @override
  _SwitchWidgetState createState() => _SwitchWidgetState();
}

class _SwitchWidgetState extends State<SwitchWidget> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(
          child: Switch(
            value: isSwitched,
            onChanged: (value) {
              setState(() {
                isSwitched = value;
                print(isSwitched);
              });
            },
            activeTrackColor: Colors.lightGreenAccent,
            activeColor: Colors.green,
          ),
        )
    );
  }
}

Is there a way to put the Switch Widget into a ShowDialog without separating it into another statefull widget?

score 6 · Accepted Answer · answered May 27 '20 at 02:02

You can copy paste run full code below
You can use StatefulBuilder in content attribute of AlertDialog

code snippet

 return AlertDialog(content: StatefulBuilder(
                    builder: (BuildContext context, StateSetter setState) {
                  return Container(

working demo

full code

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            var ret = showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(content: StatefulBuilder(
                    builder: (BuildContext context, StateSetter setState) {
                  return Container(
                    height: MediaQuery.of(context).size.height / 3,
                    child: Center(
                      child: Switch(
                        value: isSwitched,
                        onChanged: (value) {
                          setState(() {
                            isSwitched = value;
                            print(isSwitched);
                          });
                        },
                        activeTrackColor: Colors.lightGreenAccent,
                        activeColor: Colors.green,
                      ),
                    ),
                  );
                }));
              },
            );
          },
          child: Text("show toggle button"),
        ),
      ),
    );
  }
}

score 2 · Answer 2 · answered May 27 '20 at 02:04

There are many ways to achieve that, but the correct way would be use a separate StateFul Widget for all the AlertDialog, you can check other answers related to this topic here.

In other hand, I can recommend you to use a ValueNotifier in this kind of scenarios where you want to manipulate only simple data, it's very simple to use, try the next:

class _State extends State<MyApp> {
  ValueNotifier<bool> _isSwitched = ValueNotifier(false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            var ret = showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  content: Container(
                    height: MediaQuery.of(context).size.height / 3,
                    child: Center(
                      child: ValueListenableBuilder<bool>(
                          valueListenable: _isSwitched,
                          builder: (context, currentState, child) {
                            return Switch(
                              value: currentState,
                              onChanged: (value) {
                                _isSwitched.value = value;
                              },
                              activeTrackColor: Colors.lightGreenAccent,
                              activeColor: Colors.green,
                            );
                          }),
                    ),
                  ),
                );
              },
            );
          },
          child: Text("show toggle button"),
        ),
      ),
    );
  }
}

Hope it helps.

flutter, Switch widget does not work properly in the showDialog

2 Answers2

Linked