how to make click with selection on ListTile? - flutter

Question

I have US states displayed on the screen. They are displayed using a ListView. I need to make it so that when you click on one of the states, a checkmark appears. Now in the trailing I added an icon, but when you click on one state, a checkmark appears on all. How can this be implemented?
class _AddStatePageState extends State<AddStatePage> {
static const List<String> _usaStates = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
...
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: const AppBarWithSearch(
appBarTitle: 'Add State',
),
body: Padding(
padding: const EdgeInsets.only(top: 24),
child: ListView.separated(
itemCount: _usaStates.length,
itemBuilder: (context, index) {
return ListTile(
trailing: Image.asset(
Assets.assetsCheckmark,
width: 13,
height: 10,
),
title: Text(
_usaStates[index],
),
);
},
separatorBuilder: (context, index) {
return const Divider();
},
),
),
);
}
}

Answer 1

Something along these lines:
class _AddStatePageState extends State<AddStatePage> {
static const List<String> _usaStates = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
...
];
static const List<bool> _usaStatesSelected = [false, false, true, ...];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: const AppBarWithSearch(
appBarTitle: 'Add State',
),
body: Padding(
padding: const EdgeInsets.only(top: 24),
child: ListView.separated(
itemCount: _usaStates.length,
itemBuilder: (context, index) {
return ListTile(
onTap: () {
setState(() {
for(var i = 0; i < _usaStatesSelected.length; i++) {
_usaStatesSelected[i] = false;
}
_usaStatesSelected[index] = true;
});
},
trailing:
_usaStatesSelected[index] == false
? SizedBox.shrink()
: Image.asset(
Assets.assetsCheckmark,
width: 13,
height: 10,
),
title: Text(
_usaStates[index],
),
);
},
separatorBuilder: (context, index) {
return const Divider();
},
),
),
);
}
}

Answer 2

ListTile provide onTap method, you can use it. To show selected item, create a variable that will holds the selected index on state class.
int? _selectedIndex;
and ListTile will be
return ListTile(
onTap: () {
_selectedIndex=index;
setState(() {});
},
trailing:
_selectedIndex==index ? Icon(Icons.check) : null,
Replace Icon(Icons.check) with your image.