'Flutter how to random list on listview
I have a TextField that when the User inputs value it updates the list view which works perfectly as done in the below code but I will like to add a shuffle button that when clicked will randomize the list on the ListView.
ListView.separated(
separatorBuilder: (context, index) => Divider(
color: Colors.white,
),
itemCount: data == null ? 0 : data.length,
itemBuilder: (context, index) {
return Card(
child: Text(
data[index],
),
);
},
),
),
TextField(
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.done,
controller: _controllerPassPhrase,
onSubmitted: (value) => setState(() {
data.add(value);
}),
)
InkWell(
onTap: (){
},
child: Container(
// padding: EdgeInsets.all(5),
child: Align(
alignment: Alignment.center,
child: Flexible(
child: Icon(
Icons.shuffle,
size: 20,
))))),
My shuffle button should randomize list inside ontap in above code
Solution 1:[1]
you can just shuffle your list members with .shuffle() , this sample code might be helpful:
Column(
children: [
Expanded(
child: ListView.separated(
separatorBuilder: (context, index) => Divider(
color: Colors.white,
),
itemCount: data.length,
itemBuilder: (context, index) {
return Card(
child: Text(
data[index].toString(),
),
);
},
),
),
Expanded(
child: TextField(
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.done,
// controller: _controllerPassPhrase,
onSubmitted: (value) => setState(() {
// data.add(value);
}),
),
),
Expanded(
child: InkWell(
onTap: () {
setState(() {
data.shuffle();
});
},
child: Container(
// padding: EdgeInsets.all(5),
child: Align(
alignment: Alignment.center,
child: Flexible(
child: Icon(
Icons.shuffle,
size: 20,
))))),
),
],
),
the output would look like:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |