How to add Select All and Deselect all button to the following code in flutter?

Question

I am a beginner and still learning flutter, and unable to add the select all/deselect all button Can anyone help me? I have a list of items and I want to add the Select All/Deselect All button to the following code, and when the Select all button is clicked below "Selected Button" should be visible.

This is my model class

 class ToyCarListModel{

  String toyimages, toyname, toymodel;
  bool isSelected;

  ToyCarListModel(this.toyimages, this.toyname, this.toymodel, this.isSelected);

}

This is main screen code

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:listview_image_text/carlistmodel.dart';

class ListToysUsingModel extends StatefulWidget {

  @override
  _ListToysUsingModelState createState() => _ListToysUsingModelState();
}

class _ListToysUsingModelState extends State<ListToysUsingModel> {

  List<ToyCarListModel> toylist =[
    ToyCarListModel("assets/pikachu.png", "flutter1", "model 1", false),
    ToyCarListModel("assets/pikachu.png", "flutter2", "model 2", false),
    ToyCarListModel("assets/pikachu.png", "flutter3", "model 3", false),
    ToyCarListModel("assets/pikachu.png", "flutter4", "model 4", false),
    ToyCarListModel("assets/pikachu.png", "flutter5", "model 5", false),
    ToyCarListModel("assets/pikachu.png", "flutter6", "model 6", false),
  ];

  List<ToyCarListModel> selectedcars = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List view with images using model'),
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              child: TextButton(
                onPressed: () {},
                child: Text('All Select'),
              ),
            ),
            Expanded(child: ListView.builder(
              itemCount: toylist.length,
                itemBuilder: (BuildContext context, int index){
                return toysItem(
                  toylist[index].toyimages,
                  toylist[index].toyname,
                  toylist[index].toymodel,
                  toylist[index].isSelected,
                  index,
                );
                }),
            ),
            selectedcars.length > 0 ? Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 25,
                vertical: 10,
              ),
              child: SizedBox(
                width: double.infinity,
                child: RaisedButton(
                  color: Colors.black,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Selected',style: TextStyle(color: Colors.white),),
                      Icon(Icons.done,color: Colors.white,),
                    ],
                  ),
                  onPressed: () {
                    print("List Lenght: ${selectedcars.length}");
                  },
                ),
              ),
            ): Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 25,
                vertical: 10,
              ),
              child: SizedBox(
                width: double.infinity,
                child: RaisedButton(
                  color: Color(0xFFBFBFC0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Selected',style: TextStyle(color: Colors.white30),),
                      Icon(Icons.done,color: Colors.white30,),
                    ],
                  ),
                  onPressed: () {
                    print("List Lenght: ${selectedcars.length}");
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget toysItem( String toyimages, toyname, toymodel, bool isSelected, int index){
    return Container(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Image.asset(toyimages),
              GestureDetector(
                child: Container(
                  child: isSelected
                      ? Icon(
                    Icons.check_circle,
                    color: Colors.black,
                  )
                      : Icon(
                    Icons.radio_button_unchecked_outlined,
                    color: Colors.grey,
                  ),
                ),
                onTap: (){
                  setState(() {
                    toylist[index].isSelected = !toylist[index].isSelected;
                    if (toylist[index].isSelected == true) {
                      selectedcars.add(ToyCarListModel(toyimages, toyname,toymodel, true));
                    } else if (toylist[index].isSelected == false) {
                      selectedcars
                          .removeWhere((element) => element.toyname == toylist[index].toyname);
                    }
                  });
                },
              ),
            ],
          ),
          Text(toyname),
          Text(toymodel),
          Divider(),
        ],
      ),
    );
  }

}

Answer 1

Duplication can be avoided using HashSet instead of List. You can use below code,

HashSet selectedcars = HashSet();

Using HashSet, you will have lesser code in selection & deselection logic. You can just check if the value present in hashset then show selection otherwise deselect the item.

To know more details on how to implement select and delete all using HashSet & single button, you can refer this link.

Answer 2

Here code for select

child: TextButton(
                onPressed: () {
                  setState (() {
                     for (var i = 0; i<toylist.length ; i++)
                         toylist[i]. isSelected = true;
                     selectedcars.addAll(toylist);
                     });
                 },
                child: Text('All Select'),
              ),

Here code for Deselect all

child: TextButton(
                onPressed: () {
                  setState (() {
                     for (var i = 0; i<toylist.length  ; i++)
                         toylist[i]. isSelected = false;
                     });
                 },
                child: Text('Deselect All'),
              ),