Flutter how to empty array - flutter

Question

Flutter i am adding data by forEach loop in an array
Code.
class _BrowserCategoryPage2State extends State<BrowserCategoryPage2> {
var items = {'Items': []};
#override
Widget build(BuildContext context) {
print('browse subcategory');
print(widget.subCategory);
widget.subCategory.forEach((subcategory) {
items['Items'].addAll(subcategory['Items']);
});
print(items);
print('sada');
return Scaffold(
appBar: buildAppBar(),
body: Container(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
buildCategoryHeading(context),
GridView.builder(
itemCount: widget.subCategory.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ScrollPhysics(),
padding: EdgeInsets.symmetric(horizontal: 18.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 15.0,
mainAxisSpacing: 15.0,
childAspectRatio: 4.0 / 7.0,
),
itemBuilder: (context, index) {
var category = categoryList[index];
double duration = index / 2;
return FadeInAnimation(
duration.toInt(),
child: GestureDetector(
onTap: (){
print(widget.subCategory[index]['Items']);
setState(() {
var items = {'Items': []};
print(items);
});
},
child: Container(
width: 80.0,
child: Column(
children: <Widget>[
Container(
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Theme.of(context)
.accentColor
.withOpacity(.2)),
image: DecorationImage(
image: AssetImage(
'assets/icons/shirt.png'),
),
),
),
SizedBox(height: 12.0),
Text(
widget.subCategory[index]['Name'],
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.subtitle2,
).tr(),
],
),
)
),
);
},
),
],
),
),
),
);
}
}
Now you can see I am showing products that are coming in the Items array. Now what I need to do is onTap I need to clear all items. So after then ill insert another item so need to remove all arrays from Items.
Hope my question is understandable its simple mean I need to clear all arrays from Items when I click on GestureDetectore

Answer 1

Although you clear list by tapping button, list will be added again when 'build' is called.
#override
Widget build(BuildContext context) {
print('browse subcategory');
print(widget.subCategory);
widget.subCategory.forEach((subcategory) {
items['Items'].addAll(subcategory['Items']);
});
So you need to move initializing list code.
class _BrowserCategoryPage2State extends State<BrowserCategoryPage2> {
var items = {'Items': []};
#override
void initState() {
super.initState();
print(widget.subCategory);
widget.subCategory.forEach((subcategory) {
items['Items'].addAll(subcategory['Items']);
});
print(items);
print('sada');
}
#override
Widget build(BuildContext context) {
print('browse subcategory');
return Scaffold(
appBar: buildAppBar(),
body: Container(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
buildCategoryHeading(context),
GridView.builder(
itemCount: widget.subCategory.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ScrollPhysics(),
padding: EdgeInsets.symmetric(horizontal: 18.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 15.0,
mainAxisSpacing: 15.0,
childAspectRatio: 4.0 / 7.0,
),
itemBuilder: (context, index) {
var category = categoryList[index];
double duration = index / 2;
return FadeInAnimation(
duration.toInt(),
child: GestureDetector(
onTap: (){
print(widget.subCategory[index]['Items']);
setState(() {
items = {'Items': []};
// Or
// items['Items'].clear();
print(items);
});
},
child: Container(
width: 80.0,
child: Column(
children: <Widget>[
Container(
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Theme.of(context)
.accentColor
.withOpacity(.2)),
image: DecorationImage(
image: AssetImage(
'assets/icons/shirt.png'),
),
),
),
SizedBox(height: 12.0),
Text(
widget.subCategory[index]['Name'],
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.subtitle2,
).tr(),
],
),
)
),
);
},
),
],
),
),
),
);
}
}

Answer 2

You can just assign a new value, that is empty:
items['Items'] = [];
You can also call the clear method:
items['Items'].clear();
And if you want make the smallest possible change to your code that would work, remove the var, you don't want a new variable, you want to change the existing one:
setState(() {
items = {'Items': []};
print(items);
});

Answer 3

I have never used flutter but Id say just declare the array again.
var items = {'Items': []};
widget.subCategory.forEach((subcategory) {
items['Items'].addAll(subcategory['Items']);
});
//declare array again to empty array
var items = {'Items': []};