how to make click with selection on ListTile?-CodePudding

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();
          },
        ),
      ),
    );
  }
}

CodePudding user response：

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();
          },
        ),
      ),
    );
  }
}

CodePudding user response：

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.