A, effects,

Sku is a common feature of mall projects. Here is an implementation of Flutter.

Second, the use of

dependencies:
 itwo_flutter_sku: ^ 0.0.1
Copy the code
1. Data processing

The back end usually returns data in, or some other format.

[{"id":1."stock":100."skuName":"Memory: 16 g | CPU: I5."
    },
    {
        "id":2."stock":100."skuName":"Memory: 16 g | CPU: I7."
    },
    {
        "id":3."stock":100."skuName":"Memory: 32 gb | CPU: I5."}]Copy the code

To traverse, slice, or otherwise convert the data returned from the back end to this format:

    List<ISkuBean> dataList = List<ISkuBean>() .. add(ISkuBean(iSkuBeanId:1, iSkuStock: 100, skuTagMap: {"Memory": "16G"."CPU": "I5"}))
      ..add(ISkuBean(iSkuBeanId: 2, iSkuStock: 100, skuTagMap: {"Memory": "16G"."CPU": "I7"}))
      ..add(ISkuBean(iSkuBeanId: 3, iSkuStock: 100, skuTagMap: {"Memory": "32G"."CPU": "I5"}));
Copy the code
2. Use mode

Used in widgets

    Container(
      padding: EdgeInsets.all(20),
      child: Sku(
        skuBeanList: dataList,
        zeroStockSelectEnable: false,
        onSelected: (sku) => print('${sku.toString()}'),),),Copy the code

When the skU is correctly selected, the three tag constructors provided by the selected SKU in the constructor are returned in onSelected to facilitate customization

  Sku({
    Key? key,
    required this.skuBeanList,
    required this.onSelected,
    this.zeroStockSelectEnable = true.// Whether skUs of 0 inventory are optional
    this.normalItemBuild,// Optional tag
    this.selectedItemBuild,// Selected tag
    this.disableItemBuild,// Unusable tag
  }
Copy the code