Card Extended 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.

Varianti di utilizzo

Variante 1

Card con un’icona personalizzata, check attivo e widget aggiuntivi nell’intestazione.

CardContent(
    cardViewModel: CardViewModel(
      config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(), onTap: (CardViewModel item) {}),
      contentConfig: CardContentConfig(
        title: IconTextViewModel(
            text: "Corso Android",
            maxLines: 2,
            rightWidgetLeftMargin: 10,
            rightWidget: ChipWithIcon(
              chipCardDecoration: BoxDecoration(boxShadow: const [
                BoxShadow(
                  color: Colors.green,
                  spreadRadius: 1,
                  blurRadius: 2,
                ),
              ], borderRadius: BorderRadius.circular(20), color: Colors.green),
              title: 'In corso',
            )),
        description: IconTextViewModel(text: "Mer 2 Feb ore 09:00 - Lun 13 Mar ore 21:00"),
        subDescription: IconTextViewModel(
            text: "3.5",
            rightWidget: SvgPicture.asset(EvaUiKitResources.icFullStar.assetName,
                package: EvaUiKitResources.icFullStar.packageName, width: 12, height: 12, color: Colors.amber)),
      ),
      headerConfig: CardHeaderConfig(
        imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
        topRightWidget: SvgPicture.asset(
          EvaUiKitResources.icFlag.assetName,
          package: EvaUiKitResources.defaultPackage,
          color: colorScheme?.courseChipColor,
          width: 20,
          height: 20,
        ),
        bottomRightWidgets: [
          const ChipWithIcon(title: "Avanzato"),
          ChipWithIcon(
            title: "pe",
            icon: SvgPicture.asset(
              EvaUiKitResources.icFlag.assetName,
              package: EvaUiKitResources.defaultPackage,
              color: colorScheme?.courseChipColor,
              width: 10,
              height: 10,
            ),
          )
        ],
      ),
      bottomConfig: CardBottomConfig(progress: CardBottomProgress(progressValue: 0.7)),
      overlayConfig: OverlayItemConfig(isChecked: true, onTap: () {}, icon: EvaUiKitDemoResources.icTime),
    ),
  )

Variante 2

Card con overlay item che mostra una data, check disattivato, widget in basso a destra e widget in alto a destra.

CardContent(
    cardViewModel: CardViewModel(
      config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(), onTap: (CardViewModel item) {}),
      contentConfig: CardContentConfig(
        title: IconTextViewModel(
          text: "Corso Android",
          maxLines: 2,
        ),
        description: IconTextViewModel(text: "Mer 2 Feb ore 09:00 - Lun 13 Mar ore 21:00"),
        subDescription: IconTextViewModel(
            text: "3.5",
            rightWidget: SvgPicture.asset(EvaUiKitResources.icFullStar.assetName,
                package: EvaUiKitResources.icFullStar.packageName, width: 12, height: 12, color: Colors.amber)),
      ),
      headerConfig: CardHeaderConfig(
        imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
        topRightWidget: SvgPicture.asset(
          EvaUiKitResources.icFlag.assetName,
          package: EvaUiKitResources.defaultPackage,
          color: colorScheme?.courseChipColor,
          width: 20,
          height: 20,
        ),
        bottomRightWidgets: [
          const ChipWithIcon(title: "Avanzato"),
          ChipWithIcon(
            title: "pe",
            icon: SvgPicture.asset(
              EvaUiKitResources.icFlag.assetName,
              package: EvaUiKitResources.defaultPackage,
              color: colorScheme?.courseChipColor,
              width: 10,
              height: 10,
            ),
          )
        ],
      ),
      bottomConfig: CardBottomConfig(progress: CardBottomProgress(progressValue: 0.7)),
      overlayConfig: OverlayItemConfig(
          isChecked: false, startDate: DateTime.now(), endDate: DateTime.now(), onTap: () {}),
    ),
  )

Variante 3

Card con overlay item che mostra un range di date, check attivo, widget in basso a destra e widget in alto a destra.

CardViewModel(
      config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(), onTap: (CardViewModel item) {}),
      contentConfig: CardContentConfig(
        title: IconTextViewModel(
          text: "Corso Android",
          maxLines: 2,
        ),
        description: IconTextViewModel(text: "Mer 2 Feb ore 09:00 - Lun 13 Mar ore 21:00"),
        subDescription: IconTextViewModel(
            text: "3.5",
            rightWidget: SvgPicture.asset(EvaUiKitResources.icFullStar.assetName,
                package: EvaUiKitResources.icFullStar.packageName, width: 12, height: 12, color: Colors.amber)),
      ),
      headerConfig: CardHeaderConfig(
        imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
        topRightWidget: SvgPicture.asset(
          EvaUiKitResources.icFlag.assetName,
          package: EvaUiKitResources.defaultPackage,
          color: colorScheme?.courseChipColor,
          width: 20,
          height: 20,
        ),
        bottomRightWidgets: [
          const ChipWithIcon(title: "Avanzato"),
          ChipWithIcon(
            title: "pe",
            icon: SvgPicture.asset(
              EvaUiKitResources.icFlag.assetName,
              package: EvaUiKitResources.defaultPackage,
              color: colorScheme?.courseChipColor,
              width: 10,
              height: 10,
            ),
          )
        ],
      ),
      bottomConfig: CardBottomConfig(progress: CardBottomProgress(progressValue: 0.7)),
      overlayConfig: OverlayItemConfig(
          isChecked: true,
          startDate: DateTime.now(),
          endDate: DateTime.now().add(const Duration(days: 5)),
          onTap: () {},
          icon: AdamResource("assets/vector/ic_live.svg", "eva_learning"),
          orientation: EvaCardOverlayItemContentDoubleOrientation.vertical),
    )

Variante 4

Card con overlay item che mostra un range di date in orientamento orizzontale, check disattivato, widget in basso a destra e widget in alto a destra.

CardContent(
    cardViewModel: CardViewModel(
      config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(), onTap: (CardViewModel item) {}),
      contentConfig: CardContentConfig(
        title: IconTextViewModel(
          text: "Corso Android",
          maxLines: 2,
        ),
        description: IconTextViewModel(text: "Mer 2 Feb ore 09:00 - Lun 13 Mar ore 21:00"),
        subDescription: IconTextViewModel(
            text: "3.5",
            rightWidget: SvgPicture.asset(EvaUiKitResources.icFullStar.assetName,
                package: EvaUiKitResources.icFullStar.packageName, width: 12, height: 12, color: Colors.amber)),
      ),
      headerConfig: CardHeaderConfig(
        imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
        topRightWidget: SvgPicture.asset(
          EvaUiKitResources.icFlag.assetName,
          package: EvaUiKitResources.defaultPackage,
          color: colorScheme?.courseChipColor,
          width: 20,
          height: 20,
        ),
        bottomRightWidgets: [
          const ChipWithIcon(title: "Avanzato"),
          ChipWithIcon(
            title: "pe",
            icon: SvgPicture.asset(
              EvaUiKitResources.icFlag.assetName,
              package: EvaUiKitResources.defaultPackage,
              color: colorScheme?.courseChipColor,
              width: 10,
              height: 10,
            ),
          )
        ],
      ),
      bottomConfig: CardBottomConfig(progress: CardBottomProgress(progressValue: 0.7)),
      overlayConfig: OverlayItemConfig(
          isChecked: false,
          startDate: DateTime.now(),
          endDate: DateTime.now().add(const Duration(days: 5)),
          onTap: () {},
          icon: AdamResource("assets/vector/ic_live.svg", "eva_learning"),
          orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal),
    ),
  )