flutter List view with cards - flutter

Question

I am a beginner in Flutter programming, and I am in the learning phase. I am trying to create only the UI of a list using dummy data for the item which can be bought very frequently by the customer. for example a customer has bought pencils very often, and a pen not so often, so the pencils will be on the top of the list and pen will be below the pencils and so on...! Below is the image which I wanted to create
waiting for your suggestions. thanks
in short frequently bought items are on the top of the list.

Answer 1

List dataItems = [
{"product": "pencil", "frequency" :4},
{"product": "pencil2", "frequency" :4},
{"product": "pencil4", "frequency" :4}
];
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(children: const[
Text("No"),
SizedBox(width: 16),
Text("Product"),
SizedBox(width: 16),
Text("Frequency"),
]),
Expanded(
child: ListView.builder(
itemCount: 2,
itemBuilder: (ctx, index){
return Row(children: [
Text(index.toString()),
SizedBox(width: 16),
Text(dataItems[index]["product"]),
SizedBox(width: 16),
Text(dataItems[index]["frequency"].toString()),
Spacer(),
MaterialButton(onPressed: (){}, child: Text("Deliver"), ),
MaterialButton(onPressed: (){}, child: Text("Self Pickup"), )
]);
}
))
],
),
You can use an implement like this, try using row methods in order to divide items inside the row.

Answer 2

i hope it little help
class DemoWork extends StatefulWidget {
const DemoWork({Key? key}) : super(key: key);
#override
State<DemoWork> createState() => _DemoWorkState();
}
class _DemoWorkState extends State<DemoWork> {
List product=[
{'product':'pencil', 'frequency': 10}, {'product':'pen','frequency':24}, {'product':'notebook','frequency':12}, {'product':'markers','frequency':2}, {'product':'erasers','frequency':21}
];
Iterable<dynamic>? data;
#override
void initState() {
// TODO: implement initState
super.initState();
product.sort((a, b) {
return a['frequency'].compareTo(b['frequency']);
});
//output is {product: pen, frequency: 24}, {product: erasers, frequency: 21}, {product: notebook, frequency: 12}, {product: pencil, frequency: 10}, {product: markers, frequency: 2}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 5,
shrinkWrap: true,
reverse: true,// because list show low to high so reverse use to show high to low value and shrink wrap adjust its size use as you want to show and adjust it
itemBuilder: (context, index) {
return ListTile(
leading:Text(index.toString()) ,
title: Text(product[index]['product']),
trailing: Text(product[index]['frequency'].toString()),
);
}),
);
}
}

Answer 3

You can counting time user buying stuffs and use it to sort the list. Of course u need to build your widget for yourself, i will only suggest the logic.
Example
void main() {
var stuffs = ['ball', 'pen', 'pencil', 'glass']; // your stuff here
var history = ['pencil', 'pencil', 'glass', 'pen', 'glass', 'pencil']; // your buy history here, you can add more if you want
print('stuff will dispaly in order: $stuffs');
stuffs.sort((a,b) => history.timesOf(b).compareTo(history.timesOf(a))); // Function that sort the list by 'buy times' of user store in `history` variable
print('stuff will dispaly in order when using history: $stuffs');
}
extension HistoryCheck on List<String> {
int timesOf(String name) => where((_) => _ == name).length;
}
// ===== Result =====
stuff will dispaly in order: [ball, pen, pencil, glass]
stuff will dispaly in order when using history: [pencil, glass, pen, ball]

Answer 4

Suppose you have the following product model and list of products:
// Product Model
class Product {
final int serialNo;
final String name;
final int frequency;
const Product(this.serialNo, this.name, this.frequency);
}
// List of products
List<Product> data = [
Product(1, 'Pencil', 35),
Product(2, 'Pen', 30),
Product(3, 'Notebook', 25),
];
Just before showing this list of products in a list view, you can sort it based on the frequency as shown below:
data.sort((a, b) => b.frequency.compareTo(a.frequency));