Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter ListTile enable multi-select onLongPress

Tags:

flutter

I would like to achieve the similar things like in Google Keep.

Enable multi-select onLongPress

How can I enable multiple selections on long press and change the header buttons, so that I can delete those selected items later ?

My current Dart code :

@override
  Widget build(BuildContext context) {
    return new Card(
      child: new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
        new ListTile(
          leading: const Icon(Icons.info),
          title: new Text(item.name),
          subtitle: new Text(item.description),
          trailing: new Text(item.dateTime.month.toString()),
          onTap: () => _openEditDialog(context, item),
          onLongPress: // what should I put here,
        )
      ]),
    );
  }
like image 480
Mrye Avatar asked Apr 01 '18 16:04

Mrye


People also ask

How do you select multiple Listtiles in Flutter?

I am taking the requirement as you don't want to toggle, but to select multiple items. This is the solution. In Flutter, creating a different StatefulWidget for the buttons, will be unique for every button, and when you select the buttons. And hitting each button will have unique informations only.

How do you use multiple lists in Flutter?

To concatenate or join two lists in dart or Flutter you can use . addAll() method. In the code snippet, we have defined two lists _fruits and _vegetables and we concatenate them.


1 Answers

when the user do a long press the ListTile must change the selected property to true and vise versa and the Card Color must be Changed to Something like Grey[300]

class cardy extends StatefulWidget {
  @override
  _cardyState createState() => new _cardyState();
}

class _cardyState extends State<cardy> {
  var isSelected = false;
  var mycolor=Colors.white;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: mycolor,
      child: new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
        new ListTile(
            selected: isSelected,
            leading: const Icon(Icons.info),
            title: new Text("Test"),
            subtitle: new Text("Test Desc"),
            trailing: new Text("3"),
            onLongPress: toggleSelection // what should I put here,
            )
      ]),
    );
  }

  void toggleSelection() {
    setState(() {
      if (isSelected) {
        mycolor=Colors.white;
        isSelected = false;
      } else {
        mycolor=Colors.grey[300];
        isSelected = true;
      }
    });
  }
}

enter image description here

EDIT : if you want to get the Border coloring effect make the column Inside the a Container and set the decoration property to a variable and call it border and Edit the select method

void toggleSelection() {
    setState(() {
      if (isSelected) {
        border=new BoxDecoration(border: new Border.all(color: Colors.white));
        mycolor = Colors.white;
        isSelected = false;
      } else {
        border=new BoxDecoration(border: new Border.all(color: Colors.grey));
        mycolor = Colors.grey[300];
        isSelected = true;
      }
    });
  }
like image 135
Raouf Rahiche Avatar answered Oct 19 '22 07:10

Raouf Rahiche