Notification 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 di notifica con un bottone.

CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 10), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
              customWidget: buildDatesNotification(
                  colorScheme: colorScheme,
                  overlayItemWidget: buildOverlayItem(
                      colorScheme,
                      OverlayItemConfig(
                        isChecked: true,
                        orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal,
                        overlayItemSize: OverlayItemSize.normal,
                        startDate: DateTime(2024, 2, 3),
                        endDate: DateTime(2024, 2, 5),
                      )),
                  title: IconTextViewModel(text: "Buone Notizie!"),
                  description1: IconTextViewModel(text: "Pierpaolo"),
                  description2: IconTextViewModel(text: " ha accettato la tua richiesta"))),
          bottomConfig:
              CardBottomConfig(buttons: CardBottomButtons(buttons: [ButtonViewModel(label: 'Ok Grazie', type: ButtonType.standard, action: () {})])),
        )

Variante 2

Questa variante mostra una card di notifica con due bottoni.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 10), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
              customWidget: buildDatesNotification(
                  colorScheme: colorScheme,
                  overlayItemWidget: buildOverlayItem(
                      colorScheme,
                      OverlayItemConfig(
                        isChecked: false,
                        orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal,
                        overlayItemSize: OverlayItemSize.normal,
                        startDate: DateTime(2024, 2, 3),
                        endDate: DateTime(2024, 2, 5),
                      )),
                  title: IconTextViewModel(text: "Buone Notizie!"),
                  description1: IconTextViewModel(text: "Pierpaolo"),
                  description2: IconTextViewModel(text: " ha accettato la tua richiesta"))),
          bottomConfig: CardBottomConfig(
              buttons: CardBottomButtons(buttons: [
            ButtonViewModel(label: 'Dettaglio', type: ButtonType.outlined, action: () {}),
            ButtonViewModel(label: 'Ok Grazie', type: ButtonType.standard, action: () {})
          ])),
        ),
      )

Variante 3

Questa variante mostra una card di notifica con tre bottoni.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 10), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
              customWidget: buildDatesNotification(
                  colorScheme: colorScheme,
                  overlayItemWidget: buildOverlayItem(
                      colorScheme,
                      OverlayItemConfig(
                        isChecked: true,
                        orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal,
                        overlayItemSize: OverlayItemSize.normal,
                        startDate: DateTime(2024, 2, 3),
                        endDate: DateTime(2024, 2, 5),
                      )),
                  title: IconTextViewModel(text: "Buone Notizie!"),
                  description1: IconTextViewModel(text: "Pierpaolo"),
                  description2: IconTextViewModel(text: " ha accettato la tua richiesta"))),
          bottomConfig: CardBottomConfig(
              buttons: CardBottomButtons(buttons: [
            ButtonViewModel(label: 'Dettaglio', type: ButtonType.outlined, action: () {}),
            ButtonViewModel(label: 'Messaggia', type: ButtonType.outlined, action: () {}),
            ButtonViewModel(label: 'Ok Grazie', type: ButtonType.standard, action: () {})
          ])),
        ),
      )

Variante 4

Questa variante mostra una card di notifica con sfondo senza overlay e senza bottoni.

CardContent(
      cardViewModel: CardViewModel(
        config: CardConfig(
            backgroundColor: Colors.green.shade50, layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 10), onTap: (CardViewModel item) {}),
        contentConfig: CardContentConfig(
            customWidget: buildDatesNotification(
                colorScheme: colorScheme,
                isContentCentered: true,
                title: IconTextViewModel(text: "Buone Notizie!"),
                description1: IconTextViewModel(text: "Pierpaolo"),
                description2: IconTextViewModel(text: " ha accettato la tua richiesta"))),
      ),
    )

Variante 5

Questa variante mostra una card di notifica con tre bottoni, il layout è relativo ad un viaggio.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(
              backgroundColor: Colors.green.shade50, layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 10), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
              customWidget: buildTravelNotification(
            colorScheme: colorScheme,
            title: IconTextViewModel(text: "Buone Notizie!"),
            description1: IconTextViewModel(text: "Francesca"),
            description2: IconTextViewModel(text: " vuole aggiungersi al tuo viaggio"),
            from: IconTextViewModel(text: "Fiumicino RM"),
            to: IconTextViewModel(text: "Roma RM"),
            date: IconTextViewModel(text: "Mer 5 ottobre"),
          )),
          bottomConfig: CardBottomConfig(
              buttons: CardBottomButtons(buttons: [
            ButtonViewModel(label: 'Rifiuta', type: ButtonType.outlined, action: () {}),
            ButtonViewModel(label: 'Approva', type: ButtonType.standard, action: () {}),
            ButtonViewModel(label: 'Dettagli', type: ButtonType.standard, action: () {})
          ])),
        ),
      )