Card Extended Small Widget ========================== Il widget ``CardContent`` è progettato per mostrare contenuti in una card personalizzabile. Accetta come parametro un oggetto `CardViewModel <../viewmodel/card-viewmodel.html>`__ che consente di configurare diversi aspetti del layout, del contenuto e del comportamento della card. Costruttore ----------- Il costruttore di ``CardContent`` è definito come segue: .. code-block:: dart CardContent({ required CardViewModel cardViewModel, }); Parametri: - **cardViewModel**: un'istanza di `CardViewModel <../viewmodel/card-viewmodel.html>`__ 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 <../card-extended/card-extended.html>`__, 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. .. image:: img/card-extended-small1.png :width: 400px :align: center .. code-block:: dart 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. .. image:: img/card-extended-small2.png :width: 400px :align: center .. code-block:: dart 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. .. image:: img/card-extended-small3.png :width: 400px :align: center .. code-block:: dart 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. .. image:: img/card-extended-small4.png :width: 400px :align: center .. code-block:: dart 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), ), )