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 am taking the requirement as you don't want to toggle, but to select multiple items. This is the solution.

In Flutter, creating a different StatefulWidget for the buttons, will be unique for every button, and when you select the buttons. And hitting each button will have unique informations only. I know it is little confusing but follow this, and you will understand.

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

class _MultipleSelectItemsState extends State<MultipleSelectItems> {
  
  // This is responsible to crate your buttons 
  // Every button is created will be having it's unique instance only
  // Means, if you hit one button, it won't effect another, and you can select
  // multiple
  // And you don't have to declare your buttons multiple times in the code
  // Which is indeed bad way of coding :)
  List<Widget> get listTileWidgets{
     List<Widget> _widget = [SizedBox(height: 40.0)];
     List<String> _buttonName = ['First', 'Second', 'Third', 'Fourth'];
     
     // ListTileWidget is defined below in another StatefulWidget
     _buttonName.forEach((name){
         _widget.add(ListTileWidget(name: name));
         _widget.add(SizedBox(height: 20.0));
     });

     return _widget;
  }
  
  @override
  Widget build(BuildContext context) {
     return Material(
       child: Container(
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: this.listTileWidgets
          )
       )
     );
  }
}


// This will accept name of the button which will be used to be given
// plus maintaining the uniqueness
class ListTileWidget extends StatefulWidget{
    final String name;

    ListTileWidget({Key key, this.name}):super(key:key);
    
    @override
    ListTileWidgetState createState() => ListTileWidgetState();
}

class ListTileWidgetState extends State<ListTileWidget>{
    bool isTapped = false;

    @override
    Widget build(BuildContext context){
        return GestureDetector(
            onTap: () {
               setState(() => isTapped = true);
            },
            child: Container(
                margin: EdgeInsets.only(left: 15, right: 15),
                height:100,
                color: isTapped ? Colors.redAccent : Colors.lightBlueAccent,
                width: double.maxFinite,
                child: ListTile(
                    title: Text(
                        widget.name,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontSize: 20,
                            fontFamily: 'WorksSansSemiBold',
                            fontWeight: FontWeight.bold,
                        )
                    )
                )
            )
        );
    }
}

Result you will get is below:

I am sorry that, I have not added your "Submit" button. So in order to make that thing visible in your code, simply add this in your Column only, and you will be good to go:

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
     this.listTileWidgets,
     SizedBox(height: 40),
     MaterialButton(
       child: Text("Submit"),
       color: Colors.blueGrey,
       textColor: Colors.white,
       onPressed: () {},
     )
  ]
)

That's pretty much it now.

Answer 2

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: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}