Shop Widget

Il widget CardContent è progettato per mostrare contenuti in una card personalizzabile. Accetta come parametro un oggetto CardViewModel che consente di configurare diversi aspetti del layout, del contenuto e del comportamento della card.

Costruttore

Il costruttore di CardContent è definito come segue:

CardContent({
    required CardViewModel cardViewModel,
});

Parametri:

• cardViewModel: un’istanza di CardViewModel che specifica le configurazioni della card, tra cui il contenuto principale, l’intestazione, la sezione inferiore e l’overlay.

Questa tipologia è simile alla Card Extended, la differenza è nell’utilizzo in maniera diversa delle varie configurazioni disponibili.

Varianti di utilizzo

Variante 1

Questa variante mostra una card mini con singolo button.

CardContent(
        cardViewModel: CardViewModel(
            headerConfig: CardHeaderConfig(imageUrl: "https://www.toprunners.it/wp-content/uploads/2020/06/880-v10.jpg"),
            config: CardConfig(layoutBuilder: EvaCardMiniLayoutBuilder(), onTap: (CardViewModel item) {}),
            contentConfig: CardContentConfig(
              title: IconTextViewModel(text: "Sneakers Gaelle", maxLines: 2),
              subDescription:
                  IconTextViewModel(textTextStyle: demoColorScheme?.subDescription2TextStyle, text: "139,90 €", edgeInsets: const EdgeInsets.only(top: 0)),
            ),
            bottomConfig: CardBottomConfig(
                customWidget: Container(
              margin: const EdgeInsets.only(left: 15, bottom: 8, right: 10),
              height: 30,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  EvaButton(
                    label: "Acquista",
                    style: colorScheme?.cardShopButtonStyle,
                    action: () async {},
                  ),
                  SvgPicture.asset(
                    EvaUiKitResources.icArrowRight.assetName,
                    package: EvaUiKitResources.icArrowRight.packageName,
                    width: 10,
                    height: 10,
                    fit: BoxFit.fitHeight,
                    color: const Color(0xFF000000),
                  ),
                ],
              ),
            ))),
      )

Variante 2

Questa variante mostra una card complessa con vari widget legati ad una funzionalità specifica di shop.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0, rightContentPadding: 0), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
            customWidget: Container(
              padding: const EdgeInsets.only(left: 5, right: 5, top: 0, bottom: 0),
              child: buildShopCard(
                  onCounterChanged: (counter) {},
                  colorScheme: colorScheme,
                  title: IconTextViewModel(text: "Sneakers Gaelle"),
                  description: IconTextViewModel(text: "39,90 €"),
                  subDescription1: IconTextViewModel(text: "Taglia: 40"),
                  subDescription2: IconTextViewModel(text: "Colore: Bianco"),
                  subDescription3: IconTextViewModel(text: "Variante: Pelle"),
                  urlAvatar: "https://www.toprunners.it/wp-content/uploads/2020/06/880-v10.jpg"),
            ),
          ),
        ),
      )

Variante 3

Questa variante mostra una card relativa alla membership.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0, rightContentPadding: 0), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
            customWidget: Container(
              padding: const EdgeInsets.only(left: 15, right: 15, top: 10, bottom: 10),
              child: buildMembershipCard(
                  colorScheme: colorScheme,
                  topRightWidget: SvgPicture.asset(
                    EvaUiKitResources.icFullStar.assetName,
                    package: EvaUiKitResources.icFullStar.packageName,
                    width: 20,
                    height: 20,
                    fit: BoxFit.fitHeight,
                    color: const Color(0xFF000000),
                  ),
                  pairIconTextColumnList: [
                    PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Associato"), iconTextDescription: IconTextViewModel(text: "Mario Rossi")),
                    PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "N. Tessera"), iconTextDescription: IconTextViewModel(text: "3458374534")),
                    PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Scadenza"), iconTextDescription: IconTextViewModel(text: "Dicembre 2024"))
                  ],
                  bottomRightWidget:
                      Image.asset(width: 65, height: 65, EvaUiKitDemoResources.icQRCode.assetName, package: EvaUiKitDemoResources.icQRCode.packageName)),
            ),
          ),
        ),
      )

Variante 4

Questa variante mostra una card row con left/right widget e column pair text.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0, rightContentPadding: 0), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
            customWidget: Container(
              padding: const EdgeInsets.only(left: 15, right: 15, top: 0, bottom: 0),
              child: buildRowCardWithPairIconTextColumnList(
                  colorScheme: colorScheme,
                  leftWidget:
                      SvgPicture.asset(EvaUiKitDemoResources.icCard.assetName, package: EvaUiKitDemoResources.icCard.packageName, width: 50, height: 25),
                  pairIconTextColumnList: [
                    PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Associato"), iconTextDescription: IconTextViewModel(text: "Mario Rossi")),
                    PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "N. Tessera"), iconTextDescription: IconTextViewModel(text: "3458374534")),
                    PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Scadenza"), iconTextDescription: IconTextViewModel(text: "Dicembre 2024"))
                  ],
                  rightWidget: SvgPicture.asset(
                    EvaUiKitResources.icFullStar.assetName,
                    package: EvaUiKitResources.icFullStar.packageName,
                    width: 20,
                    height: 20,
                    fit: BoxFit.fitHeight,
                    color: const Color(0xFF000000),
                  )),
            ),
          ),
        ),
      )