Grid-view selection highlight

[Sanjay Tejani]

Hi All,

I have bind a user list in Grid-view and I want to highlight cell based on selection. Example if I click on user A then it should be highlighted same repeat User B,C,D ...

Can any one please tell me how to achieve this?

[Olaide Nojeem Ekeolere]

Hi Sanjay,

   Add a bool called selected to the model of the items, then in the grid item widget set background color based on this variable then also toggle the selected variable on tap of the grid item widget. Hope that helps.

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sanjay Tejani]

Hi Olaide,

Please look below my code have done what you said, but still not working. Can you please provide code sample or correct my code?

setState(() {
  _selectedUser = new User(
      name: snapshot.data.contacts[index].name,
      times: snapshot.data.contacts[index].times,
      lastActive: snapshot
          .data.contacts[index].lastActive,
      isSelected: true);

  if (_selectedUser.isSelected) {
    _defaultColor = Colors.redAccent;
  } else {
    _defaultColor=Colors.transparent;
  }

});Enter code here...

[Sanjay Tejani]

This is my gridview code.

new GridView.builder(
  scrollDirection: Axis.vertical,
  itemCount: snapshot.data.contacts.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4),
  itemBuilder: (context, index) {
    return new GestureDetector(
      onTap: () async {

        setState(() {
          _selectedUser = new User(
              name: snapshot.data.contacts[index].name,
              times: snapshot.data.contacts[index].times,
              lastActive: snapshot
                  .data.contacts[index].lastActive,
              isSelected: true);

          _isButtonDisabled = true;

          if (_selectedUser.isSelected) {
            _defaultColor = Colors.redAccent;
          } else {
            _defaultColor=Colors.transparent;
          }
        });

      },
      child: new Container(
        decoration: new BoxDecoration(
            border: new Border.all(color: _defaultColor),
            shape: BoxShape.rectangle),
        padding: const EdgeInsets.all(5.0),
        child: new Column(
          children: <Widget>[
            new CircleAvatar(
              backgroundColor: Colors.white,
              backgroundImage: new AssetImage(
                  'assets/images/avtar1.png'),
              radius: 30.0,
            ),
            new Text(
              snapshot.data.contacts[index].name,
              style: new TextStyle(fontSize: 12.0),
            )
          ],
        ),
      ),
    );
  },
);

[Olaide Nojeem Ekeolere]

Hi Sanjay,

    Looked through the grid view code but cannot see where you did snapshot.data.contacts[index].isSelected = true; so the widget isn’t seeing any changes.

--

[Olaide Nojeem Ekeolere]

Hi Sanjay,

  Also it should be Border.all(color: snapshot.data.contacts[index].isSelected? _selextedColor : _defaultColor)

It will also help if the gridview list items are declared in their own StatelessWidget

[Olaide Nojeem Ekeolere]

Hi Sanjay,

   Sorry i was on my mobile. I think this should sum it up based on the code you posted

new GridView.builder(
  scrollDirection: Axis.vertical,
  itemCount: snapshot.data.contacts.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4),

  itemBuilder: (context, index) => _buildGridItem(index),

);

Widget _buildGridItem(int index){

    return new GestureDetector(
      onTap: () async {
        setState(() {

          //if multiple select is allowed then remove loop below

          for(int i = 0; i < snapshot.data.contacts.length; i++){

              snapshot.data.contacts[index].isSelected =  true;        

          }
          snapshot.data.contacts[index].isSelected = !snapshot.data.contacts[index].isSelected;

          setUser(index);

      },
      child: new Container(
        decoration: new BoxDecoration(

            border: new Border.all(color: snapshot.data.contacts[index].isSelected? _selectedColor : _defaultColor),

            shape: BoxShape.rectangle),
        padding: const EdgeInsets.all(5.0),
        child: new Column(
          children: <Widget>[
            new CircleAvatar(
              backgroundColor: Colors.white,
              backgroundImage: new AssetImage(
                  'assets/images/avtar1.png'),
              radius: 30.0,
            ),
            new Text(
              snapshot.data.contacts[index].name,
              style: new TextStyle(fontSize: 12.0),
            )
          ],
        ),
      ),

    );

} 

setUser(int index){

    _selectedUser = new User(
              name: snapshot.data.contacts[index].name,
              times: snapshot.data.contacts[index].times,
              lastActive: snapshot
                  .data.contacts[index].lastActive,
              isSelected: true);
          _isButtonDisabled = true;

        });
}

[Olaide Nojeem Ekeolere]

Sorry there was an error in loop, rectified it.

new GridView.builder(
  scrollDirection: Axis.vertical,
  itemCount: snapshot.data.contacts.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4),
  itemBuilder: (context, index) => _buildGridItem(index),
);
Widget _buildGridItem(int index){
    return new GestureDetector(
      onTap: () async {
        setState(() {

          //for single selection is loop below

          for(int i = 0; i < snapshot.data.contacts.length; i++){

              if(i == index){

                 snapshot.data.contacts[index].isSelected = true;

                 setUser(index);
              }
              else snapshot.data.contacts[index].isSelected =  false;        
          }
          //for multiple selection remove loop and use only this line

          snapshot.data.contacts[index].isSelected = !snapshot.data.contacts[index].isSelected;