Multiple Selection of ListTile

Question

I am new to Flutter here i'm trying to select all the square boxes, given below is the code for single selection of ListTile when one tile is selected it changes it's background color to redAccent, but i need code for multiple selection where i can select all three ListTile or either two ListTile and not only one

class MultiSelect extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GradientAppBar(
        title: Text('MultiSelect'),
      ),
      body: MultipleSelectItems(),
    );
  }
}

class MultipleSelectItems extends StatefulWidget {
  @override
  _MultipleSelectItemsState createState() => _MultipleSelectItemsState();
}

class _MultipleSelectItemsState extends State<MultipleSelectItems> {
  String selected = "First";
  
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GestureDetector(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 40,
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  selected = "First";
                });
              },
              child: Container(
                margin: EdgeInsets.only(left: 15, right: 15),
                height:100,
                width: double.maxFinite,
                decoration: BoxDecoration(
                  color: selected == 'First' ? Colors.redAccent : Colors.lightBlueAccent,
                ),
                child: ListTile(
                  title: Text(
                    'First',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20,
                      fontFamily: 'WorksSansSemiBold',
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
             GestureDetector(
              onTap: () {
                setState(() {
                  selected = "Second";
                });
              },
              child: Container(
                margin: EdgeInsets.only(left: 15, right: 15),
                height:100,
                width: double.maxFinite,
                decoration: BoxDecoration(
                  color: selected == 'Second' ? Colors.redAccent : Colors.lightBlueAccent,
                ),
                child: ListTile(
                  title: Text(
                    'Second',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20,
                      fontFamily: 'WorksSansSemiBold',
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
             GestureDetector(
              onTap: () {
                setState(() {
                  selected = "Third";
                });
              },
              child: Container(
                margin: EdgeInsets.only(left: 15, right: 15),
                height:100,
                width: double.maxFinite,
                decoration: BoxDecoration(
                  color: selected == 'Third' ? Colors.redAccent : Colors.lightBlueAccent,
                ),
                child: ListTile(
                  title: Text(
                    'Third',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20,
                      fontFamily: 'WorksSansSemiBold',
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
              
            SizedBox(
              height: 40,
            ),
            MaterialButton(
              child: Text("Submit"),
              color: Colors.blueGrey,
              textColor: Colors.white,
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

I've got your answer. Changing the string variable to be an array can complete what you are looking to do. Then by checking if "First" or "Second" or "Third" is in the array we can determine what color the ListTile should be. Also when the ListTile is tapped we need to check if the array contains that string to determine if we are going to remove the string from the array (aka turning the color to blue) or if we need to add the string to the array (aka turning the color to red). Below I have included all of those changes to your class. Hope this answer helps! Comment if you have any questions

class MultipleSelectItems extends StatefulWidget {
  @override
  _MultipleSelectItemsState createState() => _MultipleSelectItemsState();
}

class _MultipleSelectItemsState extends State<MultipleSelectItems> {
  var theSelected = ["First"];
  
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        child: GestureDetector(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 40,
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    if(theSelected.contains("First")) {
                      theSelected.remove("First");
                    }
                    else {
                      theSelected.add("First");
                    }
                  });
                },
                child: Container(
                  margin: EdgeInsets.only(left: 15, right: 15),
                  height: 100,
                  width: double.maxFinite,
                  decoration: BoxDecoration(
                    color: theSelected.contains('First') ? Colors.redAccent : Colors.lightBlueAccent,
                  ),
                  child: ListTile(
                    title: Text(
                      'First',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20,
                        fontFamily: 'WorksSansSemiBold',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.only(top: 20)),
               GestureDetector(
                onTap: () {
                  setState(() {
                    if(theSelected.contains("Second")) {
                      theSelected.remove("Second");
                    }
                    else {
                      theSelected.add("Second");
                    }
                  });
                },
                child: Container(
                  margin: EdgeInsets.only(left: 15, right: 15),
                  height:100,
                  width: double.maxFinite,
                  decoration: BoxDecoration(
                    color: theSelected.contains('Second') ? Colors.redAccent : Colors.lightBlueAccent,
                  ),
                  child: ListTile(
                    title: Text(
                      'Second',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20,
                        fontFamily: 'WorksSansSemiBold',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.only(top: 20)),
               GestureDetector(
                onTap: () {
                  setState(() {
                    if(theSelected.contains("Third")) {
                      theSelected.remove("Third");
                    }
                    else {
                      theSelected.add("Third");
                    }
                  });
                },
                child: Container(
                  margin: EdgeInsets.only(left: 15, right: 15),
                  height:100,
                  width: double.maxFinite,
                  decoration: BoxDecoration(
                    color: theSelected.contains("Third") ? Colors.redAccent : Colors.lightBlueAccent,
                  ),
                  child: ListTile(
                    title: Text(
                      'Third',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20,
                        fontFamily: 'WorksSansSemiBold',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
                
              SizedBox(
                height: 40,
              ),
              MaterialButton(
                child: Text("Submit"),
                color: Colors.blueGrey,
                textColor: Colors.white,
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}