I am creating dynamic widget from a list and When I clicked the widget that created by list I want it to update its name. I am using stateful widget and there is no error, when I click the widget suggestionList updating itself but it doesn't effect the Text widget.
This is my list
List suggestionList = [
{'name':'Tomato','imageurl':'https://ayb.akinoncdn.com/products/2021/06/18/7025/46ead09c-f4cb-
4b85-acd7-8ca1d8452864_size780x780_quality60_cropCenter.jpg'}];
This is my GridView
GridView.builder(
shrinkWrap: true,
itemCount: suggestionList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context,index){
Map data = suggestionList[index];
return GestureDetector(
onTap: (){
setState(() {
suggestionList.clear();
suggestionList =
[{'name':'Eggplant','imageurl':'https://ayb.akinoncdn.com/products/2021/06/18/7025/46ead09c-
f4cb-4b85-acd7-8ca1d8452864_size780x780_quality60_cropCenter.jpg'}];
print(suggestionList);
});
},
child:Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 2.0, // soften the shadow
spreadRadius: 1.0, //extend the shadow
offset: Offset(
0, // Move to right 10 horizontally
1.0, // Move to bottom 5 Vertically
),
)
],
),
child: Column(
children: [
Expanded(
flex: 10,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
image: DecorationImage(image: NetworkImage(data['imageurl']),
fit: BoxFit.scaleDown)
),
),),
Expanded(flex:1,
child: Text(data['name'],style: TextStyle(
fontWeight: FontWeight.w600
),),),
],
),
));}
),
CodePudding user response:
You can try this:
setState(() {
suggestionList.clear();
suggestionList= List.from(suggestionList)
..add({'name':'Eggplant','imageurl':'https://ayb.akinoncdn.com/products/2021/06/18/7025/46ead09c-
f4cb-4b85-acd7-8ca1d8452864_size780x780_quality60_cropCenter.jpg'});
});
CodePudding user response:
If anyone need it, I am putting the answer here. I am using state management now and it works like a charm.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MultiProvider(
child: MaterialApp(
title: 'Provider',
home: NewMainPage(),
),
providers: [
ChangeNotifierProvider.value(value: PageState()),
],
);
}
}
class PageState extends ChangeNotifier{
var suggestionList = [
{'name':'Domates','imageurl':'
https://ayb.akinoncdn.com/products/2021/06/18/7025/46e
ad09c-f4cb-4b85-acd7-8ca1d8452864_size780x780_quality60_cropCenter.jpg'},
{'name':'Biber','imageurl':'
https://iasbh.tmgrup.com.tr/d852d6/1200/627/0/187/800/604?
u=https://isbh.tmgrup.com.tr/sbh/2020/05/14/biberin-faydalari-nelerdir-
yesil-biberin-cilde-faydalari-1589469175731.jpg'},
{'name':'Patlıcan','imageurl':'
https://cdn.cimri.io/market/260x260/patlican-_210439.jpg'},
];
add(List a){
suggestionList = a.toList();
notifyListeners();
}
}
class NewMainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
List suggestionList = Provider.of<PageState>(context).suggestionList;
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Provider'),),
body: GridView.builder(
shrinkWrap: true,
itemCount: Provider.of<PageState>(context).suggestionList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context,index){
Map data = Provider.of<PageState>(context).suggestionList[index];
return GestureDetector(
onTap: (){
Provider.of<PageState>(context,listen:false).add([{'name':'Eggplant','imageurl':'https://ayb.akinoncdn.com/products/2021/06/18/7025/46ead09c-f4cb-4b85-acd7-8ca1d8452864_size780x780_quality60_cropCenter.jpg'}].toList());
},
child:Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 2.0, // soften the shadow
spreadRadius: 1.0, //extend the shadow
offset: Offset(
0, // Move to right 10 horizontally
1.0, // Move to bottom 5 Vertically
),
)
],
),
child: Column(
children: [
Expanded(
flex: 10,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
image: DecorationImage(image: NetworkImage(data['imageurl']),
fit: BoxFit.scaleDown)
),
),),
Expanded(flex:1,
child: Text(data['name'],style: TextStyle(
fontWeight: FontWeight.w600
),),),
],
),
));}
),
);
}
}