How to add Select All and Deselect all button to the following code in flutter?
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(),
],
),
);
}
}
Solution 1:
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'),
),