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.

Example Image...click here

CodePudding user response：

     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.

CodePudding user response：

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

CodePudding user response：

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]

CodePudding user response：

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));