Card Compact 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 è molto simile alla Card Extended, unica differenza è sul layout builder che in questo caso è EvaCardCompactLayoutBuilder.

Varianti di utilizzo

Variante 1

Questa variante presenta una custom icon, il check attivo, content e progress.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardCompactLayoutBuilder(), 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)),
          ),
          bottomConfig: CardBottomConfig(progress: CardBottomProgress(progressValue: 0.7)),
          overlayConfig: OverlayItemConfig(isChecked: true, onTap: () {}, icon: EvaUiKitDemoResources.icTime),
        ),
      )

Variante 2

Questa variante presenta l’overlay item con data, il check disattivato e content.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardCompactLayoutBuilder(), 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)),
          ),
          overlayConfig: OverlayItemConfig(isChecked: false, startDate: DateTime.now(), endDate: DateTime.now(), onTap: () {}),
        ),
      )

Variante 3

Questa variante presenta l’overlay item con range di date horizontal, il check disattivato, content.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardCompactLayoutBuilder(), 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)),
          ),
          overlayConfig: OverlayItemConfig(
              isChecked: true,
              startDate: DateTime.now(),
              endDate: DateTime.now().add(const Duration(days: 5)),
              onTap: () {},
              orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal),
        ),
      )