title: Flutter Custom Multi Selection
body: <h3>Question</h3>
  <p>Hi, how can I implement a custom multi selection widget in flutter? Here is an example :</p>
  <p><a href="https://i.stack.imgur.com/kmiP8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kmiP8.png" alt="enter image description here" /></a></p>
  <p>I have a list of widget created with a ListView.builder and I simply want to change color based on userTap.</p>
  <p>How can I implement this? I'm able to change color when user tap on one option but then, when another button is tapped I can't understand how to reverse the state of the old selected option.</p>
  <p>I was searching for a solution with flutter standard state management or maybe with bloc library.</p>
  <h3>example code</h3>
  <pre><code>class Test extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index){
            return Padding(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: SelectableContainer(text: 'option', index: index,),
            );
          },
        ),
      );
    }
  }
  
  class SelectableContainer extends StatefulWidget {
    final String text;
    final int index;
  
    SelectableContainer({
      @required this.text,
      @required this.index
    });
    @override
    _SelectableContainerState createState() =&gt; _SelectableContainerState();
  }
  
  class _SelectableContainerState extends State&lt;SelectableContainer&gt; {
    bool _isSelected = false;
    Color unselectedColor = Colors.white;
    Color selectedColor = Colors.blue;
  
    @override
    Widget build(BuildContext context) {
      return GestureDetector(
        onTap: (){
          setState(() {
            _isSelected = true;
          });
        },
        child: AnimatedContainer(
          duration: Duration(milliseconds: 400),
          height: 50,
          color: _isSelected ? selectedColor : unselectedColor,
          child: Center(
            child: Text(widget.text),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>Thanks</p>