I am trying to implement filter in my gridview where on user input, the element in the list matching to the input will get filtered.I am saving the filtered data in a list but not able to access the elements of that list.******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************** If there is any other way that I can do this, it will be a great help.
SliverToBoxAdapter(
child: widget.branddata.responseData == null ? const Center(child: CircularProgressIndicator(color: Colors.black,)) : Container(
height: MediaQuery.of(context).size.height * 0.8,
child: GridView.builder(
itemCount: responsedata.length,
padding: const EdgeInsets.all(8.0),
scrollDirection: Axis.vertical,
shrinkWrap: true,
gridDelegate:
const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 150.0
),
itemBuilder: (BuildContext context, int index) {
return Card(
elevation: 10,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.all(8.0),
child: InkWell(
splashColor: Colors.cyanAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 60,
decoration: BoxDecoration(image:DecorationImage(image: NetworkImage(brandbaseurl '${widget.branddata.responseData![index].cmpLogo}')),shape: BoxShape.rectangle,borderRadius: const BorderRadius.all(Radius.circular(15.0)) ),
),
),
],
),
onTap: () {
setState(() {
var brandid = widget.branddata.responseData![index].id;
BrndID = brandid!;
var brndimg = widget.branddata.responseData![index].cmpLogo;
BrndIMG = brndimg!;
var brndnm = widget.branddata.responseData![index].cmpName;
BrndNm = brndnm!;
});
_brandtoken();
},
),
);
}),
)
)
This is my search text box:
TextField(
onChanged: (String){
setState(() {
isSearching = true;
responsedata = widget.branddata.responseData!.where((element) => element.cmpName!.toLowerCase().contains(mainsearchtext.text.toLowerCase())).toList();
test = responsedata[0].value;
});
},
controller: mainsearchtext,
textInputAction: TextInputAction.search,
onSubmitted: (msdata){
}
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(top: 5,left: 5),
hintText: "Search by brand",
fillColor: Colors.red,
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(width: 1, color: Colors.black26),
borderRadius: BorderRadius.circular(5.0),
),
focusedBorder:OutlineInputBorder(
borderSide: const BorderSide(color: Colors.black26, width: 1.0),
borderRadius: BorderRadius.circular(5.0),
),
),
)
CodePudding user response：
In the GridView.builder, you already use responseData which is the filtered list, so in the Card widget, you should use responseData instead of widget.branddata.responseData.
Replace the code for the Card with this below:
return Card(
elevation: 10,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.all(8.0),
child: InkWell(
splashColor: Colors.cyanAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 60,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
brandbaseurl '${responseData![index].cmpLogo}')),
shape: BoxShape.rectangle,
borderRadius:
const BorderRadius.all(Radius.circular(15.0))),
),
),
],
),
onTap: () {
setState(() {
var brandid = responseData![index].id;
BrndID = brandid!;
var brndimg = responseData![index].cmpLogo;
BrndIMG = brndimg!;
var brndnm = responseData![index].cmpName;
BrndNm = brndnm!;
});
_brandtoken();
},
),
);