When I turn on one switch, all other switches are also turn on

Question

When I turn on one switch, all other switches are also turn on. How can I fix this? When I turn on one switch, all other switches are also turn on. How can I fix this?

Here is my code:

lass _FilterPageState extends State<FilterPage> {
  bool isSwitched = false;

  Widget title(Size mediaQuery) {
    return Container(
      height: mediaQuery.height * 0.1,
      padding: const EdgeInsets.all(10),
      alignment: Alignment.center,
      child: const Text(
        'Adjust your meal selection.',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
    );
  }

  Widget filterList(String title, String subText, Size mediaQuery) {
    return Container(
      margin: const EdgeInsets.all(15),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 17,
                ),
              ),
              Text(
                subText,
                style: const TextStyle(
                  color: Colors.grey,
                  fontSize: 15,
                ),
              ),
            ],
          ),
          Switch(
            value: isSwitched,
            onChanged: (value) {
              setState(() {
                isSwitched = value;
              });
            },
            activeTrackColor: Colors.pinkAccent,
            activeColor: Colors.pink,
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Your Filters',
          textAlign: TextAlign.start,
        ),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.save,
            ),
          ),
        ],
      ),
      drawer: const DrawerList(),
      body: Column(
        children: [
          title(mediaQuery),
          filterList(
            'Gluten-free',
            'Only include gluten-free meals',
            mediaQuery,
          ),
          filterList(
            'Lactose-free',
            'Only include lactose-free meals',
            mediaQuery,
          ),
          filterList(
            'Vegeterian',
            'Only include vegeterian meals',
            mediaQuery,
          ),
          filterList(
            'Vegan',
            'Only include vegan meals',
            mediaQuery,
          ),
        ],
      ),
    );
  }
}

When I turn on one switch, all other switches are also turn on. How can I fix this?When I turn on one switch, all other switches are also turn on. How can I fix this?When I turn on one switch, all other switches are also turn on. How can I fix this?When I turn on one switch, all other switches are also turn on. How can I fix this?

Answer 1

it happenes because you used the same bool isSwitched to every item, so on any item chosen setState() changes isSwitched and applies it to all items. you should use different bool variables to operate the switches separatelty. Take a look at a handy way to have them organized in a map, where you can now access value for any switch by the key (i set title of items as the key). You can run this code snippet in DartPad.

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  createState() => MyWidgetState(); 
}

class MyWidgetState extends State<MyWidget> {
   Map<String, bool> isSwitched = {};

  Widget title(Size mediaQuery) {
    return Container(
      height: mediaQuery.height * 0.1,
      padding: const EdgeInsets.all(10),
      alignment: Alignment.center,
      child: const Text(
        'Adjust your meal selection.',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
    );
  }

  Widget filterList(String title, String subText, Size mediaQuery) {
    return Container(
      margin: const EdgeInsets.all(15),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 17,
                ),
              ),
              Text(
                subText,
                style: const TextStyle(
                  color: Colors.grey,
                  fontSize: 15,
                ),
              ),
            ],
          ),
          Switch(
            value: isSwitched[title] ?? false,
            onChanged: (value) {
              setState(() {
                isSwitched[title] = value;
              });
            },
            activeTrackColor: Colors.pinkAccent,
            activeColor: Colors.pink,
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Your Filters',
          textAlign: TextAlign.start,
        ),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.save,
            ),
          ),
        ],
      ),
      body: Column(
        children: [
          title(mediaQuery),
          filterList(
            'Gluten-free',
            'Only include gluten-free meals',
            mediaQuery,
          ),
          filterList(
            'Lactose-free',
            'Only include lactose-free meals',
            mediaQuery,
          ),
          filterList(
            'Vegeterian',
            'Only include vegeterian meals',
            mediaQuery,
          ),
          filterList(
            'Vegan',
            'Only include vegan meals',
            mediaQuery,
          ),
        ],
      ),
    );
  }
}