Card Extended Small 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 è identica alla Card Extended, unica differenza è sull’altezza dell’header.

Varianti di utilizzo

Variante 1

Questa variante presenta una custom icon, il check attivo, title con right widget e bottom right widgets.

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(
            imageHeight: kImageSmallHeight,
            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

Questa variante presenta l’overlay item con data, il check disattivato, bottom right widgets e top right widget.

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(
            imageHeight: kImageSmallHeight,
            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

Questa variante presenta l’overlay item con range di date, il check attivo, bottom right widgets e top right widget.

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(
            imageHeight: kImageSmallHeight,
            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: () {},
              orientation: EvaCardOverlayItemContentDoubleOrientation.vertical),
        )

Variante 4

Questa variante presenta l’overlay item con range di date horizontal, il check disattivato, bottom right widgets e top right widget.

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(
            imageHeight: kImageSmallHeight,
            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: () {},
              orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal),
        ),
      )