scrollable_titled_image_cards 0.0.2

A Flutter package for scrolling image cards with custom card overlays.

Scrollable Titled Image Cards

A Flutter package for scrolling image and custom card overlays.

Getting started

1. Add this to your package's pubspec.yaml file:

dependencies:
  scrollable_titled_image_cards: ^0.0.1

2. Install it from the command line:

$ flutter pub get

3. Import it in your project:

import 'package:scrollable_titled_image_cards/scrollable_titled_image_cards.dart';

Usage

ScrollableTitledImageCards is a Stateless Widget which you can include in your widget tree. You can use it either vertically or horizontally by overriding the scrollDirection property (scrollDirection = Axis.vertical by default). The clickable overlays within ScrollableTitledImageCards are Stateful Widgets. Check the examples and lib/src/clickable_overlays for the specifics on clickable overlays and how to customize them.

Horizontal scroll view

ScrollableTitledImageCards(
  scrollDirection: Axis.horizontal,
  imagesList: imagesList,
  width: 250,
  height: 350,
  onTap: (index) {
    log('$index pressed');
  },
),
ScrollableTitledImageCards(
  scrollDirection: Axis.horizontal,
  imagesList: imagesList,
  width: 250,
  height: 350,
  onTap: (index) {
    log('$index pressed');
  },
  overlays: [
    for (var title in titlesList)
      // this will be a stack element on top of the image - customize however you want or use one of the overlays or clickable overlays available
      Container(
        color: Colors.black.withOpacity(0.6),
        constraints: const BoxConstraints.expand(),
        child: Center(
          child: Text(
            title,
            style: const TextStyle(
              fontSize: 24,
              color: Colors.white,
              fontWeight: FontWeight.bold),
            ),
          ),
        )
      ],
    ),
  ],
)

Vertical scroll view

You can customize the card overlays according to your preferences by overriding the overlays property. However, ensure that the lengths of imageList and overlays are equal.

ScrollableTitledImageCards(
  imagesList: imagesList,
  width: double.infinity,
  height: 190,
  onTap: (index) {
    log('$index pressed');
  },
),

Classes, Parameters, and Overlay Options

Class: ScrollableTitledImageCards

Parameter	Description
imagesList (Required)	A list of strings representing image paths or URLs for the cards.
scrollDirection (Optional, defaults to Axis.vertical)	The scrolling direction of the cards. Can be either Axis.horizontal or Axis.vertical.
width (Optional)	The width of each card.
height (Optional)	The height of each card.
margin (Optional)	The margin applied to each card.
borderRadius (Optional)	The border radius applied to each card.
overlays (Optional)	A list of widgets to be displayed as overlays on top of the images. The length of this list must match the length of imagesList.
onTap (Optional)	A callback function that is triggered when a card is tapped. The function receives the index of the tapped card as a parameter.

Overlay Options:

Overlay	Description
TitleOverlay	Customizable widget for displaying a title with specific styles over a semi-transparent background overlay.
TitleSubtitleOverlay	Customizable widget that displays a title and subtitle with specific styles over a semi-transparent background overlay.
TitleSubtitleDescriptionOverlay	Customizable widget that displays a title, subtitle, and description with specific styles over a semi-transparent background overlay.
TitleDescriptionOverlay	Customizable widget that displays a title and description with specific styles over a semi-transparent background overlay.
DescriptionOverlay	Customizable widget that displays a description with specific styles over a semi-transparent background overlay.
ClickableDescriptionOverlay	A stateful widget that toggles the visibility of an overlay containing a description text when tapped.
ClickableTitleDescriptionOverlay	A stateful widget that toggles the visibility of an overlay containing a title and description text when tapped.
ClickableTitleSubtitleOverlay	A stateful widget that toggles the visibility of an overlay containing a title and subtitle text when tapped.
ClickableTitleSubtitleDescriptionOverlay	A stateful widget that toggles the visibility of an overlay containing a title, subtitle, and description when tapped.