how to make switches individually marked? Flutter-CodePudding

I'm making a list of notifications using switches (there will be fifteen in total), but the way I did they turn them all on and off together, how do I turn them on and off individually? And do they accept refactoring to make the code cleaner? I'm using SwitchListTile.

    class CardButton extends StatefulWidget {
  const CardButton({Key? key}) : super(key: key);

  @override
  State<CardButton> createState() => _CardButtonState();
}

class _CardButtonState extends State<CardButton> {
  bool _toggled = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Card(
          child: SwitchListTile(
            contentPadding: EdgeInsets.only(left: 16.0),
            title: Text(
              'botton',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            value: _toggled,
            onChanged: (bool value) {
              setState(() => _toggled = value);
              },
          ),
        ),
        Card(
          child: SwitchListTile(
            contentPadding: EdgeInsets.only(left: 16.0),
            title: Text(
              'botton',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            value: _toggled,
            onChanged: (bool value) {
              setState(() => _toggled = value);
            },
          ),
        ),
        Card(
          child: SwitchListTile(
            contentPadding: EdgeInsets.only(left: 16.0),
            title: Text(
              'botton',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            value: _toggled,
            onChanged: (bool value) {
              setState(() => _toggled = value);
            },
          ),
        ),
      ],
    );
  }
}

CodePudding user response：

You need to create variables to hold the switch state for each switch (toggle) - in your case 15 in total.

From your sample code with individual values for each switch:

class CardButton extends StatefulWidget {
  const CardButton({Key? key}) : super(key: key);

  @override
  State<CardButton> createState() => _CardButtonState();
}

class _CardButtonState extends State<CardButton> {
  bool _switch1Toggled = false;
  bool _switch2Toggled = false;
  bool _switch3Toggled = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Card(
          child: SwitchListTile(
            contentPadding: EdgeInsets.only(left: 16.0),
            title: Text(
              'switch 1',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            value: _switch1Toggled,
            onChanged: (bool value) {
              setState(() => _switch1Toggled = value);
              },
          ),
        ),
        Card(
          child: SwitchListTile(
            contentPadding: EdgeInsets.only(left: 16.0),
            title: Text(
              'switch 2',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            value: _switch2Toggled,
            onChanged: (bool value) {
              setState(() => _switch2Toggled = value);
            },
          ),
        ),
        Card(
          child: SwitchListTile(
            contentPadding: EdgeInsets.only(left: 16.0),
            title: Text(
              'switch 3',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            value: _switch3Toggled,
            onChanged: (bool value) {
              setState(() => _switch3Toggled = value);
            },
          ),
        ),
      ],
    );
  }
}

CodePudding user response：

Thank you very much for your tip Ranvir Mohanlal. I created this template based on your information. I think it worked better.

    class MultiSwitch extends StatefulWidget {
  const MultiSwitch({Key? key}) : super(key: key);

  @override
  State<MultiSwitch> createState() => _MultiSwitchState();
}

class _MultiSwitchState extends State<MultiSwitch> {
  bool val1 = true;
  bool val2 = false;
  bool val3 = false;

  onChangeFunction1(bool newValue1) {
    setState(() {
      val1 = newValue1;
    });
  }

  onChangeFunction2(bool newValue2) {
    setState(() {
      val2 = newValue2;
    });
  }

  onChangeFunction3(bool newValue3) {
    setState(() {
      val3 = newValue3;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            customSwitch('button', val1, onChangeFunction1),
            customSwitch('button', val2, onChangeFunction2),
            customSwitch('button', val3, onChangeFunction3),
          ],
        ),
    );
  }
}

Widget customSwitch(String text, bool val, Function onChangeMethod) {
  return Card(
    child: SwitchListTile(
      title: Text(
        text,
        style: const TextStyle(
          color: Colors.black,
          fontSize: 18,
        ),
      ),
      value: val,
      onChanged: (newValue) {
        onChangeMethod(newValue);
      }
    ),
  );
}