How to make a list with single selection-CodePudding

currently, I am trying to learn deeper about state management. I'm trying to implement a list with a single selection. This is what I have done so far. This is what the UI should look like. enter image description here

class AccountCategory extends StatefulWidget {

  bool isSelected = false;

  @override
  State<AccountCategory> createState() => _AccountCategoryState();
}

class _AccountCategoryState extends State<AccountCategory> {
  @override
  Widget build(BuildContext context) {
    return Column( 
      children: const <Widget>[ 
        Card( 
          child: ListTile( 
            title: Text('Akaun Individu', style: TextStyle(fontWeight: FontWeight.bold),), 
            subtitle: Text('Membuat pembayaran untuk diri sendiri'),
            trailing: Icon(Icons.more_horiz),

            )
          ),
        
        Card(child: ListTile( 
            title: Text('Akaun Syarikat', style: TextStyle(fontWeight: FontWeight.bold)), 
            subtitle: Text('Membuat pembayaran untuk organisasi'),
            trailing: Icon(Icons.more_vert),
          ),)
      ],
      
    );
  }
}

CodePudding user response：

You can use onTap and setState like this, if you want to build a list with many items, you should use ListView.builder and change _isSelected by index and check if index correct

class AccountCategory extends StatefulWidget {
      bool isSelected = false;
    
      @override
      State<AccountCategory> createState() => _AccountCategoryState();
    }
    
    class _AccountCategoryState extends State<AccountCategory> {
      late bool _isSelected;
    
      @override
      void initState() {
        super.initState();
        _isSelected = widget.isSelected;
      }
    
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            InkWell(
              onTap: () {
                setState(() {
                  _isSelected = true;
                });
              },
              child: Card(
                  child: ListTile(
                title: Text(
                  'Akaun Individu',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                subtitle: Text('Membuat pembayaran untuk diri sendiri'),
                trailing: _isSelected ? const Icon(Icons.check_circle) : const Icon(Icons.circle),
              )),
            ),
            InkWell(
              onTap: () {
                setState(() {
                  _isSelected = false;
                });
              },
              child: Card(
                child: ListTile(
                  title: Text('Akaun Syarikat', style: TextStyle(fontWeight: FontWeight.bold)),
                  subtitle: Text('Membuat pembayaran untuk organisasi'),
                  trailing: !_isSelected ? const Icon(Icons.check_circle) : const Icon(Icons.circle),
                ),
              ),
            )
          ],
        );
      }
    }

CodePudding user response：

Use a listView or gridView builder, Add an onTap event, call a function that takes the index of the item as an argument, return whatever you want with the function. If however you have a finite list, specify the index yourself

CodePudding user response：

Simple way is store a index of selected item in list, so you can know what item is selected and make change to list when needed.