ListView is not reload with StatefulWidget - dart

Question

I'm making one demo for learning purpose. In that demo I have just added ListView and when I tap on the ListTile there is Icons.favorite I just want to do Active and Deactive.
Below are my code.
import 'package:flutter/material.dart';
void main() => runApp(new RandomWordApp());
class RandomWordApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "Random App",
home: new RandomWordHome(),
);
}
}
class RandomWordHome extends StatefulWidget {
#override
createState() => new RandomState();
}
class RandomState extends State<RandomWordHome> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text("Random Word"),
),
body: setupListView(),
);
}
Widget setupListView() {
final _arrayOfData = [
{
"name": "Amit Patel",
"address": "Junagadh"
},
{"name": "Arjun Jain", "address": "Madhya Pradesh"},
{"name": "Ajay Shah", "address": "Limbadi"},
{"name": "Ankur Patel", "address": "Visanagar"},
{"name": "Soheb Ansari", "address": "Ahmedabad"}
];
final _arraySelectedRowStatus = List.filled(5, 0);
return new ListView.builder(
padding: new EdgeInsets.all(10.0),
itemCount: _arrayOfData.length,
itemBuilder: (context, i) {
return new ListTile(
title: new Text(_arrayOfData[i]["name"]),
subtitle: new Text(_arrayOfData[i]["address"]),
leading: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text(_arrayOfData[i]["name"][0])),
trailing: new Icon(
(_arraySelectedRowStatus[i] == 0
? Icons.favorite_border
: Icons.favorite),
color: (_arraySelectedRowStatus[i] == 0 ? null : Colors.red),
),
onTap: () {
setState(
() {
_arraySelectedRowStatus[i] =
(_arraySelectedRowStatus[i] == 0 ? 1 : 0);
Scaffold.of(context).showSnackBar(new SnackBar(
content:
new Text("You are selecting at " + i.toString())));
},
);
},
);
});
}
}
All are working well, even I got expected output from below line
print(_arrayOfData[i]["name"] + " - " + _arraySelectedRowStatus[i].toString());
But Icon is not change might be because ListView is not reloading. Where I'm going wrong? Guide me on right direction.

Answer 1

There are some issues with your approach
In order to update your UI, you have to use setState() method. Changing the variable is not enough.
You always create a final List inside ListView.builder block: final _arraySelectedRowStatus = List.filled(5, 0); and then use this list to render your UI. So the _arraySelectedRowStatus will always contain 0.
Below is updated code which will work
import 'package:flutter/material.dart';
void main() => runApp(new RandomWordApp());
class RandomWordApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "Random App",
home: new RandomWordHome(),
);
}
}
class RandomWordHome extends StatefulWidget {
#override
createState() => new RandomState();
}
class RandomState extends State<RandomWordHome> {
List _arraySelectedRowStatus = List.filled(5, 0);
#override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text("Random Word"),
),
body: setupListView(),
);
}
Widget setupListView() {
final _arrayOfData = [
{"name": "Amit Patel", "address": "Junagadh"},
{"name": "Arjun Jain", "address": "Madhya Pradesh"},
{"name": "Ajay Shah", "address": "Limbadi"},
{"name": "Ankur Patel", "address": "Visanagar"},
{"name": "Soheb Ansari", "address": "Ahmedabad"}
];
return new ListView.builder(
padding: new EdgeInsets.all(10.0),
itemCount: _arrayOfData.length,
itemBuilder: (context, i) {
return new ListTile(
title: new Text(_arrayOfData[i]["name"]),
subtitle: new Text(_arrayOfData[i]["address"]),
leading: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text(_arrayOfData[i]["name"][0])),
trailing: new Icon(
(_arraySelectedRowStatus[i] == 0
? Icons.favorite_border
: Icons.favorite),
color: (_arraySelectedRowStatus[i] == 0 ? null : Colors.red),
),
onTap: () {
_arraySelectedRowStatus[i] =
(_arraySelectedRowStatus[i] == 0 ? 1 : 0);
print(_arrayOfData[i]["name"] +
" - " +
_arraySelectedRowStatus[i].toString());
setState(() {
_arraySelectedRowStatus = _arraySelectedRowStatus;
});
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text("You are selecting at " + i.toString())));
},
);
});
}
}

Answer 2

[Update]
Here is the complete working code.
class DemoHelp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "Random App",
home: RandomWorldHome(),
);
}
}
class RandomWorldHome extends StatefulWidget {
#override
_RandomWorldHomeState createState() => new _RandomWorldHomeState();
}
class _RandomWorldHomeState extends State<RandomWorldHome> {
List<int> _arraySelectedRowStatus = List.filled(5, 1);
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Random Word"),
),
body: setupListView(),
);
}
Widget setupListView() {
final _arrayOfData = [
{"name": "Amit Patel", "address": "Junagadh"},
{"name": "Arjun Jain", "address": "Madhya Pradesh"},
{"name": "Ajay Shah", "address": "Limbadi"},
{"name": "Ankur Patel", "address": "Visanagar"},
{"name": "Soheb Ansari", "address": "Ahmedabad"}
];
return ListView.builder(
padding: new EdgeInsets.all(10.0),
itemCount: _arrayOfData.length,
itemBuilder: (context, i) {
return ListTile(
title: Text(_arrayOfData[i]["name"]),
subtitle: new Text(_arrayOfData[i]["address"]),
leading: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text(_arrayOfData[i]["name"][0])),
trailing: new Icon(
(_arraySelectedRowStatus[i] == 0
? Icons.favorite_border
: Icons.favorite),
color: (_arraySelectedRowStatus[i] == 0 ? null : Colors.red),
),
onTap: (){
setState(() {
_arraySelectedRowStatus[i] = _arraySelectedRowStatus[i] == 0 ? 1 : 0;
});
Scaffold.of(context).showSnackBar(new SnackBar(
content:
new Text("You are selecting at ${_arraySelectedRowStatus[i]}")));
},
);
},
);
}
}
Couple of problems in your code.
variable _arraySelectedRowStatus is wrongly defined as final
state variable should be declared in the state class rather than in method.
setState((){}) is used like this.