Header Widget

HeaderWidget è un widget altamente personalizzabile che accetta un oggetto HeaderViewModel per configurare e visualizzare un’intestazione dinamica. Questo widget è progettato per supportare configurazioni flessibili grazie a un modello dati che consente di definire l’aspetto e il comportamento dell’intestazione.

Costruttore

Il HeaderWidget accetta un parametro obbligatorio:

  • headerViewModel: un’istanza di HeaderViewModel, che specifica le configurazioni dell’intestazione, la sezione inferiore e l’overlay.

Varianti di utilizzo

Variante 1

Questa variante presenta un’icona personalizzata dell’overlay item, il check attivo e il progress visualizzato.

../../../_images/header1.png 
HeaderWidget(
    headerViewModel: HeaderViewModel(
      bottomConfig: HeaderBottomConfig(progressLabel: "Completato: 70%", progressValue: 0.7),
      overlayConfig: OverlayItemConfig(
        overlayItemSize: OverlayItemSize.large,
        isChecked: true,
        icon: EvaUiKitDemoResources.icTime,
      ),
      headerConfig: HeaderConfig(
        onBackTap: (item) {},
        imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
      ),
    ),
  )

Variante 2

Questa variante presenta l’overlay item con data doppia orizzontale, il check nascosto e il progress visualizzato.

../../../_images/header2.png 
HeaderWidget(
    headerViewModel: HeaderViewModel(
      bottomConfig: HeaderBottomConfig(progressLabel: "Completato: 70%", progressValue: 0.7),
      overlayConfig: OverlayItemConfig(
        overlayItemSize: OverlayItemSize.large,
        orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal,
        isChecked: false,
        startDate: DateTime.now(),
        endDate: DateTime.now().add(const Duration(days: 3)),
      ),
      headerConfig: HeaderConfig(
        onBackTap: (item) {},
        imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
      ),
    ),
  )

Variante 3

Questa variante presenta l’overlay item con data singola, il check attivo e il progress visualizzato.

../../../_images/header3.png 
HeaderWidget(
    headerViewModel: HeaderViewModel(
      bottomConfig: HeaderBottomConfig(progressLabel: "Completato: 40%", progressValue: 0.4),
      overlayConfig: OverlayItemConfig(
        overlayItemSize: OverlayItemSize.large,
        isChecked: true,
        startDate: DateTime.now(),
        endDate: DateTime.now(),
      ),
      headerConfig: HeaderConfig(
        onBackTap: (item) {},
        imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
      ),
    ),
  )

Variante 4

Questa variante presenta l’overlay item con data doppia verticale, il check disattivato e il progress visualizzato.

../../../_images/header4.png 
HeaderWidget(
    headerViewModel: HeaderViewModel(
      bottomConfig: HeaderBottomConfig(progressLabel: "Completato: 40%", progressValue: 0.4),
      overlayConfig: OverlayItemConfig(
        overlayItemSize: OverlayItemSize.large,
        orientation: EvaCardOverlayItemContentDoubleOrientation.vertical,
        isChecked: false,
        startDate: DateTime.now(),
        endDate: DateTime.now().add(const Duration(days: 3)),
      ),
      headerConfig: HeaderConfig(
        onBackTap: (item) {},
        imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
      ),
    ),
  )